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>

    效果图:

  • 相关阅读:
    目前正在自学python,前几天做了一个比较简单的坦克大战游戏,分享出来,想搞一搞的朋友,可以参考。
    我今天给学习运维而英语不好的各位,提供一些计算机英语,感谢惨绿少年的原文和已经离开身边提供英标部分的小虾大佬,只是为了记录。
    前几天看见pthon自动跳一跳很火,自己也按捺不住寂寞,实现了一把。分享一下。图文详解,如果有问题留言,帮解决。
    day01
    java之jvm篇
    mysql
    leecode刷题——数组篇
    java基础
    python进程和线程
    python I/O编程
  • 原文地址:https://www.cnblogs.com/mm2015/p/5583975.html
Copyright © 2011-2022 走看看