`
cpine
  • 浏览: 53001 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics