zoukankan      html  css  js  c++  java
  • jq 文字上下不间断滚动实例

                     <div class="ruzhuright">
                         <div class="rzcontent">
                            <div class="gundongright">
                                 <div class="gdlist">
                                     <font color="red">恭喜</font>【<a href="#">青州在线青州在线青州在线青州在线青州在线</a>】入驻城市114
                                 </div>
                                 <div class="gdlist">
                                     <font color="red">恭喜</font>【<a href="#">海川渔夫海川渔夫</a>】入驻城市114
                                 </div>
                                 <div class="gdlist">
                                     <font color="red">恭喜</font>【<a href="#">湾仔码头</a>】入驻城市114
                                 </div>
                                 <div class="gdlist">
                                     <font color="red">恭喜</font>【<a href="#">思念水饺</a>】入驻城市114
                                 </div>
                             </div>
                         </div>
                     </div> html代码

    .ruzhuright{
        display: table-cell;
         200px;
        height: auto;
        vertical-align: middle;
        padding: 0 2%;
    }
    .rzcontent{
         100%;
        height: 34px;
        overflow: hidden;
    }
    .gundongright{
         100%;
        height: auto;
    }
    .gdlist{
         100%;
        line-height: 17px;
        height: 34px;
        font-size: 12px;
        color: #999999;
    }
    .gdlist a{
        color: #007aff;
        font-size: 12px;
    } css样式

    jq代码:

                  <script>
                         function lunbo(){
                             if(!$('.gundongright').is(":animated")){
                                var wli = $('.gundongright .gdlist').height();
                                var lli = $('.gundongright .gdlist').length;
                                var tw = lli*wli;
                                var witem = wli;
                                var marl = parseInt($('.gundongright').css('margin-top'));
                                var endmar = (parseInt(tw/witem)-1)*witem;
                                if(marl <= -endmar){
                                    $('.gundongright').animate({marginTop:'0px'},300)
                                }else{
                                    $('.gundongright').animate({marginTop:marl-witem+'px'},300)
                                }
                            }
                        }
                         var t = setInterval('lunbo()',1000);
                   </script>

    效果图:

  • 相关阅读:
    Nginx资源合并优化模块nginx-http-concat
    Nginx的模块http_secure_link_module
    Nginx前段加速模块pagespeed-ngx
    Naxsi+nginx前段保护
    Selenium for C#的入门Demo
    C# 比较两个数组中的内容是否相同的算法
    C#读取自定义的config
    关于分布式计算之Actor、AKKA和MapReduce
    numpy模块的基本使用
    python单元测试库
  • 原文地址:https://www.cnblogs.com/mm2015/p/5583975.html
Copyright © 2011-2022 走看看