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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 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在字符串中查找另一个字符串
2008/11/19 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
详解JavaScript中return的用法
2017/05/08 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python用户管理系统的实例讲解
2017/12/23 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python_mask_array的用法
2020/02/18 Python
简单了解Django项目应用创建过程
2020/07/06 Python
strstr()的简单实现
2013/09/26 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
安踏广告词改编版
2014/03/21 职场文书
预防传染病方案
2014/06/14 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2022年四月新番
2022/03/15 日漫