操作Dom節點實現間歇滾動新聞

處理頁面中的間歇無縫滾動新聞的時候，最常見的方法就是將滾動區內容複製追加一份，然後透過控制和判斷滾動塊的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>