操作Dom节点实现间歇滚动新闻
转自http://www.blueidea.com/tech/web/2009/7071.asp
处理页面中的间歇无缝滚动新闻的时候，最常见的方法就是将滚动区内容复制追加一份，然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
Code
1<script language="javascript" type="text/javascript">
2
window.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>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>
处理页面中的间歇无缝滚动新闻的时候，最常见的方法就是将滚动区内容复制追加一份，然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。
其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。
代码如下：
Code1
<script language="javascript" type="text/javascript">2
window.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 当前已滚动高度10
function 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下会将空格回车作为节点的问题23
function 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>突然想用数组试下，
Code1
<!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">13
window.onload=function(){14
var o=document.getElementById('box');15
window.setInterval(function(){scrollup(o,24,0);},3000); 16
}17
function 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方法。
Code1
<!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">13
window.onload=function(){14
var o=document.getElementById('box');15
window.setInterval(function(){scrollup(o,24,0);},3000); 16
}17
function 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>
浙公网安备 33010602011771号