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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
vue中监听返回键问题
Aug 28 Javascript
详解JS预解析原理
Jun 16 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
综合办公室个人的自我评价
2013/12/22 职场文书
西式婚礼主持词
2014/03/13 职场文书
安全协议书范本
2014/04/21 职场文书
实验心得体会
2014/09/05 职场文书
成本会计岗位职责
2015/02/03 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Spring Boot 实现 WebSocket
2022/04/30 Java/Android