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 相关文章推荐
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery手风琴的简单制作
May 12 jQuery
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
解决layui table表单提示数据接口请求异常的问题
Sep 24 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通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
js实现九宫格的随机颜色跳转
2017/02/19 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python打包多类型文件的操作方法
2020/09/21 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
付款证明格式范文
2015/06/19 职场文书
个人欠条范本
2015/07/03 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers