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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 Javascript
简介JavaScript错误处理机制
Aug 04 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
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Vue常用指令V-model用法
2017/03/08 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
详解JavaScript的变量
2019/04/04 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
浅谈Django的缓存机制
2018/08/23 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
大学生毕业鉴定
2014/01/31 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2016年度师德标兵先进事迹材料
2016/02/26 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
分享几个简单MySQL优化小妙招
2022/03/31 MySQL