操作Dom节点实现间歇滚动新闻

处理页面中的间歇无缝滚动新闻的时候，最常见的方法就是将滚动区内容复制追加一份，然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。

其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。

代码如下：

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 当前已滚动高度
   
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>