javascript实现垂直无缝滚动详解
无缝滚动可以在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>