使用JavaScript&jQuery

效果圖：

?

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

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

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<-25){//如果第一行已經走出ul，將top歸零，為下個li做準備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<-25){//如果第一行已經走出ul，將top歸零，為下個li做準備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);});

?

總結

以上是生活随笔為你收集整理的11行代码实现滚动公告栏的全部內容，希望文章能夠幫你解決所遇到的問題。

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