php公告滚动源码,如何利用JavaScript&jQuery实现滚动公告栏（代码实例）

本篇文章给大家带来的内容是关于如何利用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中文网。