【js與jquery】jquery循環滾動新聞

1.效果如圖：

 

2.html代碼：

[php] view plaincopy

1. <h3>最新動態</h3>  

2. <div class="scrollNews" >  

3.          <ul>  

4.     <li><a href="#" class="tooltip" title="甜美寬鬆毛衣今秋必定紅.">甜美寬鬆毛衣今秋必定紅.</a></li>  

5.     <li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>  

6.     <li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li>  

7.     <li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>  

8.     <li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li>  

9.     <li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>  

10.     <li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>  

11.     </ul>  

12. </div>  

 

3.jquery代碼：

[php] view plaincopy

1. /*新聞滾動*/  

2. $(function(){  

3.         //將$(".scrollNews")對象做爲參數傳遞給scollNews()函數的參數  

4.         var $this = $(".scrollNews");  

5.         //滾動定時器變量  

6.         var scrollTimer;  

7.         //hover()方法的含義是鼠標滑入滑出，它對應着兩個事件，即mouseenter和mouseleave，所以可經過trigger("mouseleave")來觸發hover事件的第二個函數  

8.         $this.hover(  

9.             function(){  

10.                         clearInterval(scrollTimer);  

11.             },  

12.             function(){  

13.                          scrollTimer = setInterval(function(){  

14.                                 scrollNews( $this );//每3秒執行一次scrollNews函數  

15.                          }, 3000 );  

16.             }  

17.         ).trigger("mouseleave");//當用戶進入頁面後就會觸發hover事件的第二個函數，從而使內容滾動起來  

18.   

19. });  

20. function scrollNews(obj){  

21.    var $self = obj.find("ul:first"); //找到第一個ul元素  

22.    var lineHeight = $self.find("li:first").height(); //獲取第一個li元素的行高  

23.    $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){  

24.          //alert($self.css({marginTop:0}).find("li:first").text());//逐條獲取  

25.          //把全部匹配的元素追加到$self元素的後面,因此纔出現這種周而復始滾動的效果  

26.          $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移動元素  

27.    })  

28. }  

分析：經過控制$(".scrollNews");對象內的<ul>元素的marginTop屬性來獲得動畫效果。至於每次滾動的高度，能夠經過獲取<ul>元素內的第一個<li>元素的高度來達到目的。當每次滾動完畢後，須要把當前第一個<li>元素移動到<ul>元素內的最後，而後將<ul>元素的marginTop屬性設置爲零，這樣動畫才能夠無限的循環滾動