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

2.html代碼：

<h3>最新動態</h3>
<div class="scrollNews" >
         <ul>
    <li><a href="#" class="tooltip" title="甜美寬松毛衣今秋一定紅.">甜美寬松毛衣今秋一定紅.</a></li>
    <li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>
    <li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li>
    <li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>
    <li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li>
    <li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>
    <li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>
    </ul>
</div>

 

3.jquery代碼：

/*新聞滾動*/
$(function(){
        //將$(".scrollNews")對象作為參數傳遞給scollNews()函數的參數
        var $this = $(".scrollNews");
        //滾動定時器變量
        var scrollTimer;
        //hover()方法的含義是鼠標滑入滑出，它對應着兩個事件，即mouseenter和mouseleave，因此可通過trigger("mouseleave")來觸發hover事件的第二個函數
        $this.hover(
            function(){
                        clearInterval(scrollTimer);
            },
            function(){
                         scrollTimer = setInterval(function(){
                                scrollNews( $this );//每3秒執行一次scrollNews函數
                         }, 3000 );
            }
        ).trigger("mouseleave");//當用戶進入頁面后就會觸發hover事件的第二個函數，從而使內容滾動起來

});
function scrollNews(obj){
   var $self = obj.find("ul:first"); //找到第一個ul元素
   var lineHeight = $self.find("li:first").height(); //獲取第一個li元素的行高
   $self.animate({ "marginTop" : -lineHeight +"px" }, 600 , function(){
         //alert($self.css({marginTop:0}).find("li:first").text());//逐條獲取
         //把所有匹配的元素追加到$self元素的后面,所以才出現這種周而復始滾動的效果
         $self.css({marginTop:0}).find("li:first").appendTo($self); //appendTo能直接移動元素
   })
}

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