本文實例講解了javascript實現無縫上下滾動的代碼，分享給大家供大家參考，具體內容如下
js實現上下無縫滾動的原理是這樣的：
1、首先給容器設定高度或寬度，然后overflow:hidden；
2、容器高度設定后，內容超出則被隱藏。
3、改變容器的scrollTop（上下滾動）屬性的值，讓內容上下移動一個節點的位置（滾動的原理）；
4、到滾動的高度scrollTop大于或等于要滾動節點的高度時，設置scrollTop=0，并把把子節點樹中的第一個移動到最后，重新開始滾動，無間斷循環滾動效果就出現了。
效果圖如下：
代碼如下：
<div id="colee" style="overflow:hidden;height:100px;width:410px;border:1px solid red;"><div id="colee1"><p>php</p><p>java</p><p>ruby</p><p>python</p><p>www.phpddt.com</p></div><div id="colee2"></div></div><script>//速度設置var speed=1;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.innerHTML; //克隆colee1為colee2function Marquee1(){//當滾動至colee1與colee2交界時if(colee2.offsetTop-colee.scrollTop<=0){ colee.scrollTop-=colee1.offsetHeight; //colee跳到最頂端 }else{ colee.scrollTop++}}var MyMar1=setInterval(Marquee1,speed)//設置定時器//鼠標移上時清除定時器達到滾動停止的目的colee.onmouseover=function() {clearInterval(MyMar1)}//鼠標移開時重設定時器colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}</script>以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
