jQuery实现列表自动滚动

需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。

效果图：

  

上干货

html：

<div id="news">

    <ul>

        <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>

        <li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>

        <li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>

        <li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>

        <li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>

        <li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>

        <li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>

    </ul>

</div>

css：

ui,li {

    list-style: none;

}

#news{

    height: 75px;

    overflow: hidden;

}

关键是js文件：

$(function() {

    var $this = $("#news");

    var scrollTimer;

    $this.hover(function() {

        clearInterval(scrollTimer);

    }, function() {

        scrollTimer = setInterval(function() {

            scrollNews($this);

        }, 2000);

    }).trigger("mouseleave");



    function scrollNews(obj) {

        var $self = obj.find("ul");

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

        $self.animate({

            "marginTop": -lineHeight + "px"

        }, 600, function() {

            $self.css({

                marginTop: 0

            }).find("li:first").appendTo($self);

        })

    }

})

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性（marginLeft、top、left等等）的理解和运用，需要注意的是，如果不加.trigger("mouseleave")，在网页初始化的时候列表不会滚动，还有appendTo能直接移动元素，就这些了。