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

以上就是本文的全部内容，希望对大家的学习有所帮助。