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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jQuery中extend函数详解
Feb 13 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
如何提高javascript加载速度
Dec 26 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
Vue中render方法的使用详解
Jan 26 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
js数据类型检测总结
2018/08/05 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
速记Python布尔值
2017/11/09 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python如何随机生成高强度密码
2020/08/19 Python
有机童装:Toby Tiger
2018/05/23 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
科技之星事迹材料
2014/06/02 职场文书
办护照工作证明
2014/10/01 职场文书
护士节慰问信
2015/02/15 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸