本篇文章给大家分享的是有关利用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年孩子最喜欢的书>></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);
});
以上就是利用JavaScript&jQuery如何实现滚动公告栏,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注天达云行业资讯频道。