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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
百度小程序自定义通用toast组件
Jul 17 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
Javascript window对象详解
2014/11/12 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
js实现登录时记住密码的方法分析
2020/04/05 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python中文竖排显示的方法
2015/07/28 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
给面试官的感谢信
2014/02/01 职场文书
公司开业庆典主持词
2014/03/21 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
党员个人自我评价
2015/03/03 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
关于MySQL中explain工具的使用
2023/05/08 MySQL