JS平滑无缝滚动效果的实现代码


Posted in Javascript onMay 06, 2016

本文我们实现纯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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
原生js实现轮播图
Feb 27 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
js实现时钟定时器
Mar 26 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 #Javascript
JavaScript中的原型继承基础学习教程
May 06 #Javascript
jquery实现下拉框功能效果【实例代码】
May 06 #Javascript
浅析在javascript中创建对象的各种模式
May 06 #Javascript
jquery自定义插件——window的实现【示例代码】
May 06 #Javascript
javascript创建对象的几种模式介绍
May 06 #Javascript
前端性能优化及技巧
May 06 #Javascript
You might like
深入理解PHP原理之异常机制
2010/08/21 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php时间函数用法分析
2016/05/28 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python的PEAK来适配协议的教程
2015/04/14 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python对列表排序的方法实例分析
2015/05/16 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Django实现分页功能
2018/07/02 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
优秀大学生的自我评价
2014/01/16 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
宇宙与人观后感
2015/06/05 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书