javascript实现平滑无缝滚动


Posted in Javascript onAugust 09, 2020

本文我们实现纯JS方式的滚动广告效果,供大家参考,具体内容如下

先show一下成品:

javascript实现平滑无缝滚动

首先是网页样式:

#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显示的内容与左侧影藏的内容宽度相同时将父容器左侧影藏的内容显示出来,这样就实现了将左侧影藏的内容显示出来同时将右侧内容重新隐藏。如果右侧内容显示的部分少于左侧影藏的内容就继续讲父容器想左侧移动,实现隐藏。其中有一点需要注意的是,由于这里是将两张图片同时放入左侧,当右侧显示了一半时会将左侧影藏的完全显示出来,又因为右侧显示的内容与左侧的左边内容相同所以实现了循环滚动的效果。

这样平滑的滚动就实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 #Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 #Javascript
jquery实现全选功能效果的实现代码
May 05 #Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 #Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
You might like
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python Selenium截图功能实现代码
2020/04/26 Python
浅谈Python中的字符串
2020/06/10 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
会计自我鉴定范文
2013/10/06 职场文书
工程力学硕士生的自我评价范文
2013/11/16 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
宿舍违规检讨书
2014/01/12 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
推荐信模板
2014/05/09 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
技术入股合作协议书
2014/10/07 职场文书
劳模先进事迹材料
2014/12/24 职场文书
python实现批量移动文件
2021/04/05 Python
golang中的空slice案例
2021/04/27 Golang
python脚本框架webpy模板赋值实现
2021/11/20 Python