无缝滚动可以在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>
分享到:
相关推荐
javascript实现平滑无缝滚动_.docx
主要为大家详细介绍了javascript实现文字无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源名称:Javascript基础与案例开发详解内容简介:《Java script基础与案例开发详解》根据Javascript在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况,有针对性地安排了丰富的案例,从基本的...
基于javascript实现文字无缝滚动效果_.docx
主要介绍了原生JavaScript实现的无缝滚动功能,结合实例形式详细分析了JavaScript无缝滚动具体实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下
主要介绍了基于javascript实现文字无缝滚动效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
利用JS定时器和运动框架实现图片无缝滚动,适合初学者使用
JavaScript中实现无缝滚动、分享到侧边栏实例代码_.docx
用javascript模拟marquee实现滚动
主要为大家详细介绍了JavaScript实现图片无缝滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
javascript+div图片无缝滚动:水平方向+垂直方向...
下面小编就为大家带来一篇JavaScript实现垂直向上无缝滚动特效代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了javascript实现文字无缝滚动,文字可以实现上下滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
JavaScript 图片无缝滚动源码 图片无缝滚动源码
实现图片无缝滚动效果,可以改变图片的大小和滚动的速度
JS极简无缝滚动.html
javascript上下无缝图片滚动,糯米网产品展示javascript效果
实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)