码迷,mamicode.com
首页 > Web开发 > 详细

jquery无缝间歇向上滚动

时间:2015-02-09 15:29:05      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

技术分享
 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

 

jquery无缝间歇向上滚动

标签:

原文地址:http://www.cnblogs.com/kuangxin/p/4281590.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!