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 相关文章推荐
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
JQuery触发事件例如click
Sep 11 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
js数组常用最重要的方法
Feb 04 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 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调用新浪短链接API的方法
2014/11/08 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
javascript document.images实例
2008/05/27 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
详解webpack 最简打包结果分析
2019/02/20 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
python获取代理IP的实例分享
2018/05/07 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
python中count函数简单用法
2020/01/05 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
财务出纳岗位职责
2014/02/03 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS