下面是个简单易学的JS特效代码:实现间歇无缝文字滚动特效教程,小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。
代码如下:
script language="javascript" type="text/javascript"
(){
var o=(\);
(function(){scrollup(o,24,0);},3000);
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
if(d==c){
var t=getFirstChild().cloneNode(true);
o.removeChild(getFirstChild());
();
&&;;
}else{
c+=2;
getFirstChild().+&&;;
(function(){scrollup(o,d,c)},20);
}
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
while (!)
{
node=;
}
return node;
}
/script
ul id="box"
li 新华每日电讯:音乐版权收费像一团麻 /li
li 现代快报:人类能否和机器人结婚生孩子? /li
li 环球:美国,一家亿万富翁俱乐部的破产 /li
li 现代快报:为让媒体封口倪震欲卖李嘉欣情书/li
li 京华时报:北京航空航天大学学生自制火箭升天 /li
/ul
效果:
运行代码框
style type="text/css"!--*{ ; }#{; ; ; background:#efefef;}#box li{ ; } language="javascript" type="text/javascript"(){var o=(\);(function(){scrollup(o,24,0);},3000);}function scrollup(o,d,c){if(d==c){var t=getFirstChild().cloneNode(true);o.removeChild(getFirstChild());();&&;;}else{c+=2;getFirstChild().+&&;;(function(){scrollup(o,d,c)},20);}}function getFirstChild(node){while (!){node=;}return node;}/scriptul id="box"li 新华每日电讯:音乐版权收费像一团麻 /lili 现代快报:人类能否和机器人结婚生孩子? /lili 环球:美国,一家亿万富翁俱乐部的破产 /lili 现代快报:为让媒体封口倪震欲卖李嘉欣情书 /lili 京华时报:北京航空航天大学学生自制火箭升天 /li/ul
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]