国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > JS > 正文

JS特效代碼:實現間歇無縫文字滾動特效

2024-09-06 12:41:01
字體:
來源:轉載
供稿:網友

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 曲沃县| 黔西| 化州市| 双江| 安福县| 昆山市| 湘潭市| 班戈县| 奇台县| 富川| 苗栗县| 名山县| 玉龙| 荆州市| 台东县| 北流市| 方正县| 祥云县| 孝义市| 农安县| 宁远县| 剑河县| 房产| 喜德县| 贵阳市| 万盛区| 库伦旗| 河西区| 巩留县| 武隆县| 福建省| 乌兰浩特市| 米脂县| 新兴县| 镇江市| 永和县| 白沙| 广汉市| 桂林市| 蒲江县| 景德镇市|