javascript实现垂直无缝滚动详解-CSDN博客

本文链接：https://blog.csdn.net/iteye_18384/article/details/81822267

无缝滚动可以在flash中实现。但使用javascript同样具有效果。今天我们要看的就是javascript实现无缝滚动。要使用javascript实现无缝滚动，需要掌握以下知识：

1) setInterval函数的使用

2) document.getElementById(v)函数

3) 设置对象的innerHTML

4) offsetTop属性 : 某个对象相对于父对象的顶端距离

5) scrollTop属性 : 某个对象向上滚动的量

6) offsetHeight : 某个对象的有效高度

原理分析：

需要一个大的层"demo"包含两份要滚动的内容，这两份分别至于demo1与demo2中。结构如下：

<div id="demo">
    <div id="demo1">
          content....
    </div>
    <div id="demo2">
     </div>
</div>

利用js将demo1的内容复制一份到demo2中。实现的方法是：demo2.innerHTML = demo1.innerHTML;

然后开始将demo向上滚动，当demo2的offsetTop - demo.scrollTop 小于或等于0时，我们将demo的scrollTop滚回置顶部( demo.scrollTop -= demo1.offsetHeight)

注意：demo的高度必须足够小（不要超过demo1的高度）

具体代码如下：

<html>
<head>
<title>垂直无缝滚动实例</title>
<style type="text/css">
#demo { width:120px; height:500px; overflow:hidden; border:solid 3px red; }
</style>
</head>

<body>
<div id="demo">
<div id="demo1">
   <img src="images/js01.jpg" width="120" height="120" />
   <img src="images/js02.jpg" width="120" height="120" />
   <img src="images/js03.jpg" width="120" height="120" />
   <img src="images/js04.jpg" width="120" height="120" />
   <img src="images/js05.jpg" width="120" height="120" />
   <img src="images/js06.jpg" width="120" height="120" />
</div>

<div id="demo2"></div>
</div>

<script type="text/javascript">
var speed = 40;
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");

demo2.innerHTML = demo1.innerHTML; //复制demo1的内容到demo2中。
function marquee()
{ // 若第一遍的内容已全部显示完毕，则重新开始显示
if(demo2.offsetTop - demo.scrollTop <= 0) { demo.scrollTop -= demo1.offsetHeight; }
else { demo.scrollTop++; } // 否则向上滚动1个像素的量。
} 

var myMarquee = setInterval(marquee,speed);   // 按一定的速度滚动
demo.onmouseover = function() { clearInterval(myMarquee); } //指向时停止滚动
demo.onmouseout = function() { myMarquee = setInterval(marquee,speed); } // 移开时继续滚动
</script>

</body>

</html>