使用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行代码实现滚动公告栏的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。