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 相关文章推荐
深入认识javascript中的eval函数
Nov 02 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
node.js中的require使用详解
Dec 15 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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
使PHP自定义函数返回多个值
2006/11/26 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
在Python中表示一个对象的方法
2019/06/25 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
pygame实现弹球游戏
2020/04/14 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
总监职责范文
2013/11/09 职场文书
工作目标责任书
2014/07/23 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
大学军训心得体会800字
2016/01/11 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python基础知识之变量的详解
2021/04/14 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL