操作Dom节点实现间歇滚动新闻
转自http://www.blueidea.com/tech/web/2009/7071.asp
处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。
代码如下:
Code
1<script language="javascript" type="text/javascript">
2window.onload=function(){
3 var o=document.getElementById('box');
4 window.setInterval(function(){scrollup(o,24,0);},3000);
5}
6///滚动主方法
7///参数:o 滚动块对象
8///参数:d 每次滚屏高度
9///参数:c 当前已滚动高度
10function scrollup(o,d,c){
11 if(d==c){
12 var t=getFirstChild(o.firstChild).cloneNode(true);
13 o.removeChild(getFirstChild(o.firstChild));
14 o.appendChild(t);
15 t.style.marginTop="0px";
16 }else{
17 c+=2;
18 getFirstChild(o.firstChild).style.marginTop=-c+"px";
19 window.setTimeout(function(){scrollup(o,d,c)},20);
20 }
21}
22//解决firefox下会将空格回车作为节点的问题
23function getFirstChild(node){
24 while (node.nodeType!=1)
25 {
26 node=node.nextSibling;
27 }
28 return node;
29}
30</script>
31<ul id="box">
32 <li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
33 <li>· 现代快报:人类能否和机器人结婚生孩子? </li>
34 <li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
35 <li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
36 <li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>
37</ul>
1<script language="javascript" type="text/javascript">
2window.onload=function(){
3 var o=document.getElementById('box');
4 window.setInterval(function(){scrollup(o,24,0);},3000);
5}
6///滚动主方法
7///参数:o 滚动块对象
8///参数:d 每次滚屏高度
9///参数:c 当前已滚动高度
10function scrollup(o,d,c){
11 if(d==c){
12 var t=getFirstChild(o.firstChild).cloneNode(true);
13 o.removeChild(getFirstChild(o.firstChild));
14 o.appendChild(t);
15 t.style.marginTop="0px";
16 }else{
17 c+=2;
18 getFirstChild(o.firstChild).style.marginTop=-c+"px";
19 window.setTimeout(function(){scrollup(o,d,c)},20);
20 }
21}
22//解决firefox下会将空格回车作为节点的问题
23function getFirstChild(node){
24 while (node.nodeType!=1)
25 {
26 node=node.nextSibling;
27 }
28 return node;
29}
30</script>
31<ul id="box">
32 <li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
33 <li>· 现代快报:人类能否和机器人结婚生孩子? </li>
34 <li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
35 <li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
36 <li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>
37</ul>
突然想用数组试下,
Code
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<style type="text/css">
8*{}{ margin:0px; padding:0px;}
9#box{}{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}
10#box li{}{ list-style:none; line-height:24px;}
11</style>
12<script language="javascript" type="text/javascript">
13window.onload=function(){
14 var o=document.getElementById('box');
15 window.setInterval(function(){scrollup(o,24,0);},3000);
16}
17function scrollup(o,d,c){
18 var a=o.getElementsByTagName('li');
19 var len=a.length;
20 if(d==c){
21 var cache =a[0];
22 a.shift();
23 a.push(cache);
24 }else{
25 c+=2;
26 a[0].style.marginTop=-c+"px";
27 window.setTimeout(function(){scrollup(o,d,c)},20);
28 }
29}
30
31</script>
32</head>
33<ul id="box">
34 <li>· 1新华每日电讯:音乐版权收费像“一团麻” </li>
35 <li>· 2现代快报:人类能否和机器人结婚生孩子? </li>
36 <li>· 3环球:美国,一家亿万富翁俱乐部的破产 </li>
37 <li>· 4现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
38 <li>· 5京华时报:北京航空航天大学学生自制火箭升天 </li>
39</ul>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<style type="text/css">
8*{}{ margin:0px; padding:0px;}
9#box{}{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}
10#box li{}{ list-style:none; line-height:24px;}
11</style>
12<script language="javascript" type="text/javascript">
13window.onload=function(){
14 var o=document.getElementById('box');
15 window.setInterval(function(){scrollup(o,24,0);},3000);
16}
17function scrollup(o,d,c){
18 var a=o.getElementsByTagName('li');
19 var len=a.length;
20 if(d==c){
21 var cache =a[0];
22 a.shift();
23 a.push(cache);
24 }else{
25 c+=2;
26 a[0].style.marginTop=-c+"px";
27 window.setTimeout(function(){scrollup(o,d,c)},20);
28 }
29}
30
31</script>
32</head>
33<ul id="box">
34 <li>· 1新华每日电讯:音乐版权收费像“一团麻” </li>
35 <li>· 2现代快报:人类能否和机器人结婚生孩子? </li>
36 <li>· 3环球:美国,一家亿万富翁俱乐部的破产 </li>
37 <li>· 4现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
38 <li>· 5京华时报:北京航空航天大学学生自制火箭升天 </li>
39</ul>
但是出现了问题:第一条可以滚上去,但是第二条一直在那循环;
经人指点:getElementsByTagName 返回的是伪数组,不支持slice方法。
Code
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<style type="text/css">
8*{}{ margin:0px; padding:0px;}
9#box{}{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}
10#box li{}{ list-style:none; line-height:24px;}
11</style>
12<script language="javascript" type="text/javascript">
13window.onload=function(){
14 var o=document.getElementById('box');
15 window.setInterval(function(){scrollup(o,24,0);},3000);
16}
17function scrollup(o,d,c){
18 var a=o.getElementsByTagName('li');
19
20 var len=a.length;
21 if(d==c){
22 var cache = a[0];
23 a[0].style.marginTop=0;
24 var t = o.removeChild(a[0]);
25 o.appendChild(t);
26 }else{
27 c+=2;
28 a[0].style.marginTop=-c+"px";
29 window.setTimeout(function(){scrollup(o,d,c)},20);
30 }
31}
32
33</script>
34</head>
35<ul id="box">
36 <li>· 1新华每日电讯:音乐版权收费像“一团麻” </li>
37 <li>· 2现代快报:人类能否和机器人结婚生孩子? </li>
38 <li>· 3环球:美国,一家亿万富翁俱乐部的破产 </li>
39 <li>· 4现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
40 <li>· 5京华时报:北京航空航天大学学生自制火箭升天 </li>
41</ul>
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
7<style type="text/css">
8*{}{ margin:0px; padding:0px;}
9#box{}{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}
10#box li{}{ list-style:none; line-height:24px;}
11</style>
12<script language="javascript" type="text/javascript">
13window.onload=function(){
14 var o=document.getElementById('box');
15 window.setInterval(function(){scrollup(o,24,0);},3000);
16}
17function scrollup(o,d,c){
18 var a=o.getElementsByTagName('li');
19
20 var len=a.length;
21 if(d==c){
22 var cache = a[0];
23 a[0].style.marginTop=0;
24 var t = o.removeChild(a[0]);
25 o.appendChild(t);
26 }else{
27 c+=2;
28 a[0].style.marginTop=-c+"px";
29 window.setTimeout(function(){scrollup(o,d,c)},20);
30 }
31}
32
33</script>
34</head>
35<ul id="box">
36 <li>· 1新华每日电讯:音乐版权收费像“一团麻” </li>
37 <li>· 2现代快报:人类能否和机器人结婚生孩子? </li>
38 <li>· 3环球:美国,一家亿万富翁俱乐部的破产 </li>
39 <li>· 4现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
40 <li>· 5京华时报:北京航空航天大学学生自制火箭升天 </li>
41</ul>