jquery無縫間歇向上滾動

本文轉載自查看原文 2013-03-24 15:32 7025 JavaScript

jquery無縫間歇向上滾動

JS部份

View Code

$( function(){
     var $ this = $(".renav");
     var scrollTimer;
    $ this.hover( function(){
          clearInterval(scrollTimer);
     }, function(){
       scrollTimer = setInterval( function(){
                     scrollNews( $ this );
                }, 2000 );
    }).trigger("mouseout");
});
function scrollNews(obj){
    var $self = obj.find("ul:first");
    var lineHeight = $self.find("li:first").height();
   $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
         $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
   })
}

HTML部份

View Code

< style type ="text/css" >
.renav {
    width : 200px ;
    height : 150px ;
    line-height : 21px ;
    overflow : hidden ;
    background : #FFFFFF ;
}
.renav li {
    height : 21px ;
}
</ style >
< div class ="renav" >
     < ul style ="margin-top: 0px;" >
         < li >< a >羅氏 </ a ></ li >
         < li >< a >瑞聲達 </ a ></ li >
         < li >< a >未添加1 </ a ></ li >
         < li >< a >未添加2 </ a ></ li >
         < li >< a >未添加3 </ a ></ li >
         < li >< a >未添加4 </ a ></ li >
         < li >< a >西門子 </ a ></ li >
         < li >< a >歐姆龍 </ a ></ li >
     </ ul >
</ div >

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 原生js移動端列表無縫間歇向上滾動 Js實現內容向上無縫循環滾動 Layui table表格無縫向上滾動提示消息無縫向上滾動（vue）無縫滾動—marquee實現向上滾動（適合發布通告） liMarquee – jQuery無縫滾動插件 jQuery實現文字向上滾動 JS實現文字向上無縫滾動輪播基於zepto的插件之移動端無縫向上滾動並上下觸摸滑動基於zepto的移動端無縫向上滾動並上下觸摸滑動插件