js 文字滾動效果。

<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>

說實在的,找這一段代碼真的不容易。

來源:http://www.21shipin.com/html/93612.shtml

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章