js匀速运动

你你你就你

于 2020-07-19 22:14:48 发布

阅读量130

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Ga_b_c/article/details/107452749

版权

 <style>
    * {
      padding: 0;
      margin: 0;
    }

    #box {
      width: 100px;
      height: 100px;
      background: skyblue;
      /* position: fixed; */
      position: relative;
      left: 50px;
      top: 50px;
    }


    #box1 {
      width: 100px;
      height: 100px;
      background: greenyellow;
      position: fixed;
      /* left: 50px;
      top: 150px; */
      left: 1000px;
      top: 150px;
    }
  </style>

<body>
  <div id="box"></div>
  <div id="box1"></div>
</body>
<script>

  window.onload = function () {
    var oBox = document.querySelector('#box');
    var oBox1 = document.querySelector('#box1');
    animate(1000, 500, oBox);
    animate(50, 800, oBox1);

    function animate(direction, time, ele) {
      // var direction = 1000;
      // var time = 500;
      var current = ele.offsetLeft;       // 获取元素当前的位置
      var gap = direction - current;      // 计算运动距离

      var speed = gap / time;             // 求运动的速度

      var timer = setInterval(function () {
        var left = ele.offsetLeft;
        // speed++
        left += speed;

        if (left * gap >= direction * gap) {  // 判断到达条件
          clearInterval(timer);
          left = direction;
        }

        ele.style.left = left + 'px';

      }, 1)
    }
  }
</script>