使用JavaScript&jQuery

效果圖：

?

首先看HTML結(jié)構(gòu)，css樣式這里不再給出

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

js代碼

請首先確保已經(jīng)引入jQuery

//滾動字//確保絕對定位//使用定時(shí)函數(shù)var top=0;var t = setInterval(function () {//先設(shè)置margin-top為0$("#express li:first").css("margin-top",top);//li的高度為25，故這里以25判斷第一行是否走出ul。if(top<-25){//如果第一行已經(jīng)走出ul，將top歸零，為下個(gè)li做準(zhǔn)備top=0;//這句話的意思是，先將首行的top設(shè)為0，拷貝該行，放置最后一行//注意，如果這里不將第一行的top歸零，拷貝后他將保持top=-25的狀態(tài)，效果就是疊加在最后一行上。$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express');//移除首行，這時(shí)第二行變?yōu)槭仔?("#express li:first").remove();}else{//如果第一行還未走出ul，top自減top-=1;}},50);

額外的代碼

實(shí)現(xiàn)當(dāng)滾動時(shí)，鼠標(biāo)放置后可以停止，移出時(shí)仍可以進(jìn)行

//當(dāng)鼠標(biāo)放置后停止，松開繼續(xù)走$("#express li").hover(function() {//清除定時(shí)clearInterval(t);}, function() {t = setInterval(function () {//先設(shè)置margin-top為0$("#express li:first").css("margin-top",top);//li的高度為25，故這里以25判斷第一行是否走出ul。if(top<-25){//如果第一行已經(jīng)走出ul，將top歸零，為下個(gè)li做準(zhǔn)備top=0;//這句話的意思是，先將首行的top設(shè)為0，拷貝該行，放置最后一行//注意，如果這里不將第一行的top歸零，拷貝后他將保持top=-25的狀態(tài)，效果就是疊加在最后一行上。$("#express li:first").css("margin-top",top).clone(true).appendTo ('#express');//移除首行，這時(shí)第二行變?yōu)槭仔?("#express li:first").remove();}else{//如果第一行還未走出ul，top自減top-=1;}},50);});

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。