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>

    效果图:

  • 相关阅读:
    条件随机场(crf)及tensorflow代码实例
    Adam作者大革新, 联合Hinton等人推出全新优化方法Lookahead
    33.服务之间的调用之RPC、Restful深入理解
    RPC框架调用过程详解
    Spring 面试问题 TOP 50
    myBatis+Spring+SpringMVC框架面试题整理
    JavaSSM框架精选50道面试题
    maven build的常用生命周期
    玄武短信接口和移动MAS短信接口的API封装
    Java异步执行多个HTTP请求的例子(需要apache http类库)
  • 原文地址:https://www.cnblogs.com/mm2015/p/5583975.html
Copyright © 2011-2022 走看看