本文實例講解了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为colee2 function 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>
以上就是本文的全部內容,希望對大家的學習有所幫助。