處理頁面中的間歇無縫滾動新聞的時候,最常見的方法就是將滾動區內容復制追加一份,然后通過控制和判斷滾動塊的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>
效果:
運行代碼框
[ctrl+a 全部選擇 提示:你可先修改部分代碼,再按運行]
新聞熱點
疑難解答