编程 Javascript

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>

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

js学使用setTimeout实现轮循动画

- Author -

diasa

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中的window.open返回object的错误的解决方法

Aug 15 Javascript

jquery按回车提交数据的代码示例

Nov 05 Javascript

js禁止回车提交表单的示例代码

Dec 23 Javascript

事件委托与阻止冒泡阻止其父元素事件触发

Sep 02 Javascript

jQuery EasyUI中DataGird动态生成列的方法

Apr 05 Javascript

浅析JS异步加载进度条

May 05 Javascript

JavaScript toUpperCase()方法使用详解

Aug 26 Javascript

对angularJs中controller控制器scope父子集作用域的实例讲解

Oct 08 Javascript

解决layui laydate 时间控件一闪而过的问题

Sep 28 Javascript

jQuery实现轮播图效果demo

Jan 11 jQuery

JS co 函数库的含义和用法实例总结

Apr 08 Javascript

js操作两个json数组合并、去重，以及删除某一项元素

Sep 22 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