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 相关文章推荐
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue的for循环使用方法
Feb 12 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php支付宝接口用法分析
2015/01/04 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
利用Python爬取可用的代理IP
2016/08/18 Python
详细分析python3的reduce函数
2017/12/05 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python自动化之Ansible的安装教程
2019/06/13 Python
一些.net面试题
2014/10/06 面试题
酷瑞网络科技面试题
2012/03/30 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
考博专家推荐信模板
2013/12/02 职场文书
少年闰土教学反思
2014/02/22 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
面试感谢信范文
2015/01/22 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Python中的 Set 与 dict
2022/03/13 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis