javascript實現無縫上下滾動特效_javascript技巧

本文實例講解了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>

以上就是本文的全部內容，希望對大家的學習有所幫助。