一個非常好用的文字滾動的案例，鼠標懸浮可暫停

網上找了很多，萬變不離其宗，寫法核心都是一樣的，在這里我給大家總結一下，可收藏備用。

html:

<div class="scroll">
    <ul class="list">
        <li><a href="#" target="_blank">公告一 或 中獎者 甲</a></li>
        <li><a href="#" target="_blank">公告二 或 中獎者 乙</a></li>
        <li><a href="#" target="_blank">公告三 或 中獎者 丙</a></li>
    </ul>
</div>

 

解析：適用於只有一行顯示的公告類，以及展示中獎名單/抽獎結果等大框類，改變list高度即可

方案一：

function autoScroll(obj) {
    $(obj).find(".list").animate({
        marginTop: "-25px"
    }, 1000, function () {
        $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
    })
}
var timer = setInterval('autoScroll(".scroll")', 1000);
$(function () {
    $(".scroll").hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval('autoScroll(".scroll")', 1000);
    })
})

 

方案二：

function autoScroll(obj) {
    //var _t;
    function scroll() {
        $(obj).find(".list").animate({
            marginTop: "-25px"
        }, 500, function () {
            $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
        })
    }
    var timer = setInterval(scroll, 2800);
    $(obj).hover(
        function () {
            clearInterval(_t);
        },
        function () {
            timer = setInterval(scroll, 2800);
        }
    )
}
$(function () {
    autoScroll(".scroll");
})

 

解析：兩種方案實現的功能是一樣的，都是通過改變margin-top的值，把第一個再添加到最后一個來實現的。第一種直接寫出運行步驟，定時器可以定義在加載函數的外面，也可寫在里面，但是以下的內容必須寫在加載函數的里面，否則不能正常執行。

    如果整體又定義為一個函數，則下面要在加載函數里調用一次函數，即可執行。

    在hover事件中的回調函數，必須寫timer=setInterval(),指定時器重新賦值給timer,直接寫setInterval不起作用，如果寫var timer=setInterval();則又重新定義了一個timer，同樣不起作用。