jquery實現滾屏效果?

用jquery的animate方法，以及setInterval，實現在頁面上滾動顯示最新的文字動態

工具/原料

chrome

方法/步驟

新建一個html頁面，其中有一個div容器，以及放置內容的ul li。瀏覽器中效果如下。

給div和ul，li加上適當的樣式

接下來就是用jquery的animate讓li滾動起來。

利用jquery的animate，增加ul的marginTop致使下移，然後刪除最後一行。

重新整理頁面就能看到效果

新增新的資料，為了方便，例子中就把最後一列重新加回首列

直接在animate的回撥函式中加入

ul.find("li:last").hide()

.prependTo(ul);

ul.css({marginTop:0});

ul.find("li:first").fadeIn(1000);

如果想要加入新的資料，就

改成var newli = $('

AAA

111111

'); //這裡可以是從動態讀取的最新資訊

newli.hide().prependTo(ul);

ul.find("li:last").remove();

ul.css({marginTop:0});

ul.find("li:first").fadeIn(1000);

接下來加上定時觸發，把剛才的程式碼加到setInterval的回撥函式中

setInterval(function(){

});

如果需要做停止的操作，則需要把setInterval值賦給某個變數

scrtime = setInterval(function(){});

然後在停止的操作中 clearInterval(scrtime)

注意事項

想了解更多jquery相關內容，請自行查詢其主頁