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的移动端无缝向上滚动并上下触摸滑动插件