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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
javascript判断chrome浏览器的方法
Mar 26 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 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 mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
JavaScript事件列表解说
2006/12/22 Javascript
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
transform python环境快速配置方法
2018/09/27 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
AJAX都有哪些有点和缺点
2012/11/03 面试题
护理个人求职信范文
2014/01/08 职场文书
请假条怎么写
2014/04/10 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
工作失职自我检讨书
2015/05/05 职场文书
导游词之青岛崂山
2019/12/27 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
解决Pytorch中关于model.eval的问题
2021/05/22 Python