jquery滚动效果-无间隙向上滚动

第一：html页面

[html]  view plain  copy

 print ?

1.                                   <div class="global_module news">  
2. <h3>最新动态<img src="images/down.png" /></h3>  
3. <div class="scrollNews">  
4.     <ul id="newsScr">  
5.         <!--动态生成，减少工作量，操作简单方便-->  
6.     </ul>  
7. </div>  
8.   
9. lt;/div>  

数据向上滚动

第二：css样式

[html]  view plain  copy

 print ?

1. .global_module h3{  
2.     background:#3b5998;  
3.     color:#FFFFFF;  
4.     padding-left:10px;  
5.     margin: 0;  
6.     height:25px;  
7.     padding-top:6px;  
8.     font-size:14px;  
9. }  
10. .global_module h3 img{  
11.     float:right;  
12. }  
13. .scrollNews{  
14.     height:200px;  
15.     overflow: hidden;  
16. }  
17. .scrollNews ul li{  
18.     height:26px;  
19.     line-height:26px;  
20. }  

第三：js文件

[html]  view plain  copy

 print ?

1. $(function(){  
2.       
3.     //数据进行滚动  
4.     var $this=$('.scrollNews');  
5.     var scrollTimer=setInterval(function(){  
6.         scrollNews($this);  
7.     },1000);  
8.     $this.hover(function(){  
9.         clearInterval(scrollTimer);  
10.     },function(){  
11.         scrollTimer=setInterval(function(){  
12.             scrollNews($this);  
13.         },1000);  
14.     });  
15. });  
16.   
17. function scrollNews(obj){  
18.     var $self=obj.find('ul:first');  
19.     var lineHeight=$self.find('li:first').height();  
20.     $self.animate({  
21.         'marginTop':-lineHeight+'px'  
22.     },600,function(){  
23.         $self.css({marginTop:0}).find('li:first').appendTo($self);  
24.     });  
25. }