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

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

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

代码如下：

<script language="javascript" type="text/javascript">
window.onload=function(){
    var o=document.getelementbyid('box');
    window.setinterval(function(){scrollup(o,24,0);},3000);
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
    if(d==c){
        var t=getfirstchild(o.firstchild).clonenode(true);
        o.removechild(getfirstchild(o.firstchild));
        o.appendchild(t);
        t.style.margintop="0px";
    }else{
        c+=2;
        getfirstchild(o.firstchild).style.margintop=-c+"px";
        window.settimeout(function(){scrollup(o,d,c)},20);
    }
}
//解决firefox下会将空格回车作为节点的问题
function getfirstchild(node){
  while (node.nodetype!=1)
  {
         node=node.nextsibling;
  }
  return node;
}
</script>
<ul id="box">
    <li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
    <li>· 现代快报：人类能否和机器人结婚生孩子? </li>
    <li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
    <li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
    <li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>   
</ul>

效果：

运行代码框
<style type="text/css"><!--*{ margin:0px; padding:0px;}#box{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}#box li{ list-style:none; line-height:24px;}--></style><script language="javascript" type="text/javascript">window.onload=function(){var o=document.getelementbyid('box');window.setinterval(function(){scrollup(o,24,0);},3000);}function scrollup(o,d,c){if(d==c){var t=getfirstchild(o.firstchild).clonenode(true);o.removechild(getfirstchild(o.firstchild));o.appendchild(t);t.style.margintop="0px";}else{c+=2;getfirstchild(o.firstchild).style.margintop=-c+"px";window.settimeout(function(){scrollup(o,d,c)},20);}}function getfirstchild(node){while (node.nodetype!=1){node=node.nextsibling;}return node;}</script><ul id="box"><li>· 新华每日电讯:音乐版权收费像“一团麻” </li><li>· 现代快报：人类能否和机器人结婚生孩子? </li><li>· 环球:美国,一家亿万富翁俱乐部的破产 </li><li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li><li>· 京华时报:北京航空航天大学学生自制火箭升天 </li></ul>
[ctrl+a 全部选择 提示：你可先修改部分代码，再按运行]