jQuery關於通知欄自己滾動效果

今天在制作個人作品時，要制作通知欄。個人意向是做成上下自動滾動的一種效果。換個思路理解的話，我們可以認為是圖片輪播變成了text輪播，同時方向變為了上下。

簡單的理一下思路。我們拿兩個li來測試。

<ul>
    <li>
        <a href="#">通知1</a>
    </li>
    <li>
 　　   <a href="#">通知2</a>
    </li>
</ul>

他們間的上下滾動主要是通過animate（）方法，向上平移玩成，拿單一的li來說，就是把他從原來的位置通過margin-top改為負值來向上方移動。所以，我們每次要做的就是選擇最上層的li，並同時取得其高。

  var $first = $("ul:first");
  var height = $first.find("li:first").height();

這樣之后就可以在只有的animate平移中知道上移的距離。又因為這是一個不運行的通知欄，在原來的第一個li移動到margin負值后，我們要將其重新插入ul>li隊列的最后方，就可以通過appendTo（）方法完成，同時原來的第二個li將變為first one。

 $first.animate({
                "marginTop":-height+"px"},600,function(){
                $first.css({
                    marginTop: 0
                }).find("li:first").appendTo($first);
            });

如此簡單的滾動通知欄的邏輯基本完成。

在此，我們要注意，因為通知欄在不斷地滾動，說明這也是一個計時器事件，需要setInterval（）幫助完成，而且在用戶鼠標移動通知新聞上時，通知欄要第一時間停止滾動。

所以我們要設置一個停止邏輯，即鼠標的：hover狀態。

 var setTime;
    $("ul").hover(function(){
        clearInterval(setTime);
    },

最后來完善精簡整個代碼

$(function(){
    var setTime;
    $("ul").hover(function(){
        clearInterval(setTime);
    },
    function(){
        setTime=setInterval(function(){
            var $first = $(ul:first");
            var height = $first.find("li:first").height();
            $first.animate({
                "marginTop":-height+"px"},600,function(){
                $first.css({
                    marginTop: 0
                }).find("li:first").appendTo($first);
            });
        },3000);
    }).trigger("mouseleave");
});

在幫助文檔中，trigger(type, [data])方法 ,我們知道參數type是一個事件對象或者要觸發的事件類型。為了讓通知欄在用戶鼠標離開時再度運行，我就添加了一個觸發事件后運行整個計時器。