JS平滑无缝滚动效果的实现代码
更新时间：2016年05月06日 17:01:50 投稿：jingxian
下面小编就为大家带来一篇JS平滑无缝滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考
本文我们实现纯JS方式的滚动广告效果。
先show一下成品：
首先是网页样式：
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 1280px;
height:200px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
布局如下：
<div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="banner.jpg" border="0" /></a> <a href="#"><img src="banner2.jpg" border="0" /></a> </div> <div id="demo2"></div> </div> </div>
具体的JS实现：
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft==0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval
(Marquee,speed)};
</script>
这里要注意的是：
scrollLeft代表页面利用滚动条滚动到右侧时，隐藏在滚动条左侧的页面的宽度。
offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
明白了这个具体的实现就好理解了。
实现的原理是这样的：首先将需要滚动的内容复制一份。当右侧的div显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来，这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动，实现影藏。其中有一点需要注意的是，由于这里是将两张图片同时放入左侧，当右侧显示了一半时会将左侧影藏的完全显示出来，又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。
这样平滑的滚动就实现了。
以上这篇JS平滑无缝滚动效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
javascript获取ckeditor编辑器的值(实现代码)
这篇文章主要介绍了javascript获取ckeditor编辑器的值，用于表单验证。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这篇文章主要介绍了JavaScript中的类(Class)详细介绍,本文讲解了JavaScript中类的定义、JavaScript中的Constructor(构造函数)、类名等内容,需要的朋友可以参考下2014-12-12
本文主要介绍了JavaScript 对象合并的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
迭代是访问集合元素的一种方法,可以被迭代的对象称为可迭代对象,下面这篇文章主要给大家介绍了关于如何优雅迭代JavaScript字面对象的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了浅谈Javascript编程风格，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了浅谈Webpack核心模块tapable解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
Display SQL Server Login Mode...2007-06-06
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
这篇文章主要介绍了JavaScript数据结构与算法之二叉树添加/删除节点操作,涉及javascript二叉树的定义、节点添加、删除、遍历等相关操作技巧,需要的朋友可以参考下2019-03-03
二维码作为现代信息传递的重要工具,其黑白色调一直是其标志性特征,然而,有时我们可能希望个性化定制二维码的颜色,以适应特定设计需求或提高可识别性,在这篇文章中,我们将深入探讨如何使用Canvas技术修改二维码的颜色,为二维码添加更多创意和个性2023-11-11
最近在学习js 写了个简单的效果,菜鸟可以学习学习,基本原理：使用随即数设置top 和left的值，2009-07-07
最新评论