jquery无缝间歇向上滚动

 1 $(function(){
 2     var $this = $(".renav");
 3     var scrollTimer;
 4     $this.hover(function(){
 5           clearInterval(scrollTimer);
 6      },function(){
 7        scrollTimer = setInterval(function(){
 8                      scrollNews( $this );
 9                 }, 2000 );
10     }).trigger("mouseout");
11 });
12 function scrollNews(obj){
13    var $self = obj.find("ul:first");
14    var lineHeight = $self.find("li:first").height();  
15    $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
16          $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
17    })
18 }

Js Code

 1 <style type="text/css">
 2 .renav{
 3     width:200px;
 4     height:150px;
 5     line-height:21px;
 6     overflow:hidden;
 7     background:#FFFFFF;
 8 }
 9 .renav li{
10     height:21px;
11 }
12 </style>
13 <div class="renav">
14     <ul style="margin-top: 0px;">
15         <li><a>罗氏</a></li>
16         <li><a>瑞声达</a></li>
17         <li><a>未添加1</a></li>
18         <li><a>未添加2</a></li>
19         <li><a>未添加3</a></li>
20         <li><a>未添加4</a></li>
21         <li><a>西门子</a></li>
22         <li><a>欧姆龙</a></li>
23     </ul>
24 </div>

Html Code

 

转载于:https://www.cnblogs.com/kuangxin/p/4281590.html