本篇文章給大家帶來的內容是關于如何利用JavaScript&jQuery實現滾動公告欄(代碼實例)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

首先看HTML結構，css樣式這里不再給出

• ?2010考研英語大綱到貨75折...
• ?權威定本四大名著(人民文...
• ?口述歷史權威唐德剛先生國...
• ?袁偉民與體壇風云：實話實...
• ?我們臺灣這些年：轟動兩岸...
• ?暢銷教輔推薦：精品套書50...
• ?2010版法律碩士聯考大綱75...
• ?計算機新書暢銷書75折搶購
• ?2009年孩子最喜歡的書>>
• ?弗洛伊德作品精選集59折
• ?暢銷教輔推薦：精品套書50...

js代碼

請首先確保已經引入jQuery//滾動字

//確保絕對定位

//使用定時函數

var top=0; var t = setInterval(function () { //先設置margin-top為0

$("#express li:first").css("margin-top",top); //li的高度為25，故這里以25判斷第一行是否走出ul。

if(top

top=0; //這句話的意思是，先將首行的top設為0，拷貝該行，放置最后一行

//注意，如果這里不將第一行的top歸零，拷貝后他將保持top=-25的狀態，效果就是疊加在最后一行上。

$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express'); //移除首行，這時第二行變為首行

$("#express li:first").remove();

}else{ //如果第一行還未走出ul，top自減

top-=1;

}

},50);

額外的代碼

實現當滾動時，鼠標放置后可以停止，移出時仍可以進行//當鼠標放置后停止，松開繼續走

$("#express li").hover(function() { //清除定時

clearInterval(t);

}, function() {

t = setInterval(function () { //先設置margin-top為0

$("#express li:first").css("margin-top",top); //li的高度為25，故這里以25判斷第一行是否走出ul。

if(top

top=0; //這句話的意思是，先將首行的top設為0，拷貝該行，放置最后一行

//注意，如果這里不將第一行的top歸零，拷貝后他將保持top=-25的狀態，效果就是疊加在最后一行上。

$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express'); //移除首行，這時第二行變為首行

$("#express li:first").remove();

}else{ //如果第一行還未走出ul，top自減

top-=1;

}

},50);

});

以上就是對如何利用JavaScript&jQuery實現滾動公告欄(代碼實例)的全部介紹，如果您想了解更多有關JavaScript教程，請關注PHP中文網。

總結

以上是生活随笔為你收集整理的php公告滚动源码,如何利用JavaScriptjQuery实现滚动公告栏（代码实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。