js学使用setTimeout实现轮循动画


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了setTimeout实现轮循动画的具体代码,供大家参考,具体内容如下

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id='box'></div>
  <script>
    var oBox = document.getElementById("box");
    var maxLeft = utils.win('clientWidth')-oBox.offsetWidth;
    var step = 5;
    var timer = null;
    //使用递归思想完成setTimeout的轮循动画:每一次在执行动画之前把上一次设置没用的定时器清除掉,节约我们的内存空间
    function move(){
      window.clearTimeout(timer);
      var curLeft = utils.css(oBox,"left");
      if(curLeft+step >= maxLeft){//边界判断
        utils.css(oBox,"left",maxLeft);
        return;
      }
      curLeft+=step;
      utils.css(oBox,"left",curLeft);
      timer = window.setTimeout(move,10)
    }
    move();

  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 同时进行多个形变动画
Sep 15 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
Jul 27 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 #Javascript
javascript  数组排序与对象排序的实例
Jul 17 #Javascript
jQuery常用选择器详解
Jul 17 #jQuery
js轮播图的插件化封装详解
Jul 17 #Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 #Javascript
Vue.js中组件中的slot实例详解
Jul 17 #Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
javascript事件模型代码
2007/07/01 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
2018/09/19 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python中使用 Selenium 实现网页截图实例
2014/07/18 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python机器学习实现决策树
2019/11/11 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
python入门之基础语法学习笔记
2020/02/08 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
班主任工作年限证明
2014/01/12 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
学习方法演讲稿
2014/05/10 职场文书
给校长的建议书600字
2014/05/15 职场文书
售后客服工作职责
2014/06/16 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
四年级学生期末评语
2014/12/26 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL