javascript实现⽆缝上下滚动特效
本⽂实例讲解了javascript实现⽆缝上下滚动的代码，分享给⼤家供⼤家参考，具体内容如下
js实现上下⽆缝滚动的原理是这样的：
1、⾸先给容器设定⾼度或宽度，然后overflow:hidden；
2、容器⾼度设定后，内容超出则被隐藏。
3、改变容器的scrollTop（上下滚动）属性的值，让内容上下移动⼀个节点的位置（滚动的原理）；
4、到滚动的⾼度scrollTop⼤于或等于要滚动节点的⾼度时，设置scrollTop=0，并把把⼦节点树中的第⼀个移动到最后，重新开始滚动，⽆间断循环滚动效果就出现了。
效果图如下：
代码如下：
<div id="colee" >
<div id="colee1">
<p>php</p>
<p>java</p>
<p>ruby</p>
<p>python</p>
<p>www.phpddt</p>
</div>
<div id="colee2"></div>
</div>
<script>
代码运行js特效
//速度设置
var speed=1;
var ElementById("colee2");
var ElementById("colee1");
var ElementById("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)//设置定时器
//⿏标移上时清除定时器达到滚动停⽌的⽬的
//⿏标移开时重设定时器
</script>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。