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是一个事件对象或者要触发的事件类型。为了让通知栏在用户鼠标离开时再度运行，我就添加了一个触发事件后运行整个计时器。

转载于:https://www.cnblogs.com/lh0616/p/5003882.html