jquery无缝间歇向上滚动

浏览数：27 / 时间：2015年06月09日
技术分享 
 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

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src html http la sp class style com log src html http la sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢