当前位置：首页 > 资讯 > 技术文档

js学使用setTimeout实现轮循动画

时间：2021-04-02 23:48 编辑：来源：阅读：
扫一扫，手机访问

摘要：js学使用setTimeout实现轮循动画

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

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

全部评论(0)

上一篇：一个简单但常用的javascript表格样式_鼠标划过行变色简洁实现
下一篇：JavaScript 中有关数组对象的方法(详解)

资讯排行榜
更多>>