js学使用setTimeout实现轮循动画

2019-11-19 16:03:33

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解Vue学习笔记进阶篇之列表过渡及其他

下一篇：详解Vue2.x-directive的学习笔记