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 相关文章推荐
accesskey 提交
Jun 26 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
Vue header组件开发详解
Jan 26 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
基于PHP array数组的教程详解
2013/06/05 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
List Installed Software Features
2007/06/11 Javascript
js加强的经典分页实例
2013/03/15 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
jQuery为某个div加入行样式
2017/06/09 jQuery
浅谈vuepress 踩坑记
2018/04/18 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python单例模式实例分析
2015/01/14 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
房屋转让协议书
2014/04/11 职场文书
语文课外活动总结
2014/08/27 职场文书
总经理助理岗位职责
2015/01/31 职场文书
村官个人总结范文
2015/03/03 职场文书
妈妈别哭观后感
2015/06/08 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers