JS无缝滚动效果实现方法分析


Posted in Javascript onDecember 21, 2016

本文实例讲述了JS无缝滚动效果实现方法。分享给大家供大家参考,具体如下:

JS无缝滚动效果实现方法分析

效果:

1.默认缓慢往左滚动

2.放到左箭头上还是向左滚动,放到右箭头上向右滚动

3.放到图片上停止滚动,移出继续滚动

思路:

1.计算图片列表ul的宽度

2.开启定时器,使其向左边距不断增大,造成向左运动的效果

3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0。向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度)。(拉的瞬间很快,用户察觉不到,造成一种无缝滚动的假象)

4.offsetLeft值的正负决定往哪边移动

5.放到图片上停止这个定时器,移开再开启

window.onload=function(){
 var odiv=document.getElementById('div');
 var oul=odiv.getElementsByTagName('ul')[0];
 var oli=oul.getElementsByTagName('oul');
 var btn=document.getElementsByTagName('btn');
 var ispeed=-1;
 var timer=null;
 oul.innerHTML+=oul.innerHTML; //图片列表复制一份
 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话,运动过程中后面的会先出现再加载图片,有一种不流畅感,切图片过多会分行,由外面的div决定宽度
 timer=setInterval(function(){
  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft输出的是数字不带单位,右边也用oul.style.left输出的是字符串,而不是数值,而且它取得是行间样式,无用
  if(oul.offsetLeft<-oul.offsetWidth/2){ //判断时也可以用.style.left或.style.width?(不确定)
   oul.style.left=0;
  }
  else if(oul.offsetLeft>0){
   oul.style.left=-oul.offsetWidth/2;
  }
 ),30};
 btn[0].onmouseover=function(){
  ispeed=-1;
 };
 btn[1].onmouseover=function(){
  ispeed=1;
 };
 oul.onmouseover=function(){
  clearInterval(timer);
 };
 oul.onmouseout=function(){
  timer=setInterval(function(){
   oul.style.left=oul.offsetLeft+ispeed+'px';
   if(oul.offsetLeft<-oul.offsetWidth/2){
    oul.style.left=0;
   }
   else if(oul.offsetLeft>0){
    oul.style.left=-oul.offsetWidth/2;
   }
  ),30}; //如果把速度变大,而定时器的时间也变大是否可以达到相同效果呢?答案是不能。会变成一卡一卡
 };
};

注:这样子取得的宽度是不包含margin的,所以图片间边距的写法可以是li的宽度大于img的宽度,li的宽度-img的宽度,就是两边的边距和

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
js实现三角形粒子运动
Sep 22 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
简单实现JS计算器功能
Dec 21 #Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
You might like
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
PHP7 list() 函数修改
2021/03/09 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python 获取div标签中的文字实例
2018/12/20 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
电气自动化大学生求职信
2013/10/16 职场文书
专科毕业生学习生活的自我评价
2013/10/26 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
网络信息安全承诺书
2014/03/26 职场文书
毕业生就业意向书
2014/04/01 职场文书
房产委托公证书样本
2014/04/04 职场文书
行政处罚决定书
2015/06/24 职场文书