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 相关文章推荐
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JQuery基础语法小结
Feb 27 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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
php下将XML转换为数组
2010/01/01 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP时间和日期函数详解
2015/05/08 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python 操作文件的基本方法总结
2017/08/10 Python
浅谈Python中的私有变量
2018/02/28 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
浅谈django 模型类使用save()方法的好处与注意事项
2020/03/28 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
大学生职业规划论文
2014/01/11 职场文书
学习委员自我鉴定
2014/01/13 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL