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>

    效果图:

  • 相关阅读:
    JavaScript基础学习(三)—数组
    JavaScript基础学习(二)—JavaScript基本概念
    JavaScript基础学习(一)—JavaScript简介
    HTML基础学习(二)—CSS
    HTML基础学习(一)—HTML
    JDBC基础学习(六)—数据库连接池
    JDBC基础学习(五)—批处理插入数据
    js_页面关闭beforeunload事件
    css3_box-shadow使用记录
    jq_$.extend和$.fn.extend插件开发和方法的封装
  • 原文地址:https://www.cnblogs.com/mm2015/p/5583975.html
Copyright © 2011-2022 走看看