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能直接移動元素,就這些了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM