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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
javascript数据类型示例分享
Jan 19 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
canvas绘制折线路径动画实现
May 12 Javascript
简单实现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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
React组件的三种写法总结
2017/01/12 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
tornado框架blog模块分析与使用
2013/11/21 Python
用python写asp详细讲解
2013/12/16 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python 数据结构之队列的实现
2017/01/22 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python Tornado框架的使用示例
2020/10/19 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
广告词串烧
2014/03/19 职场文书
个人担保书范文
2014/05/20 职场文书
文案策划专业自荐信
2014/07/07 职场文书
授权委托书样本
2014/09/25 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技