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>

    效果图:

  • 相关阅读:
    服务器键盘设置错误 完美解决
    windows 彻底删除360文件 360zipext.dll 等等
    VS2005智能设备中无法找到PInvoke DLL
    如何使用DotNet 2.0中的应用程序配置 Settings.settings
    维护应用程序状态(一):使用浏览器cookie
    NHibernate学习导航
    HTML基础(三):基本的HTML标签
    使用Cookie对象保存用户自定义设置
    ASP.NET2.0 个性化用户配置
    sealed修饰符的使用
  • 原文地址:https://www.cnblogs.com/mm2015/p/5583975.html
Copyright © 2011-2022 走看看