100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > JS特效代码:实现间歇无缝文字滚动特效

JS特效代码:实现间歇无缝文字滚动特效

时间:2021-12-11 20:59:35

相关推荐

JS特效代码:实现间歇无缝文字滚动特效

下面是个简单易学的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 全部选择 提示:你可先修改部分代码,再按运行]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。