动画函数封装:设置任意的一个元素,移动到指定的目标位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: red;
      /*脱离文档流*/
      position: absolute;
    }
  </style>
  <script>

    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
      clearInterval(element.timeId);
      //定时器的id值存储到对象的一个属性中
      element.timeId = setInterval(function () {
        //获取元素的当前的位置,数字类型
        var current = element.offsetLeft;
        //每次移动的距离
        var step = 10;
        step = current < target ? step : -step;
        //当前移动到位置
        current += step;
        if (Math.abs(current - target) > Math.abs(step)) {
          element.style.left = current + "px";
        } else {
          //清理定时器
          clearInterval(element.timeId);
          //直接到达目标
          element.style.left = target + "px";
        }
      }, 20);
    }

  </script>
</head>
<body>


</body>
</html>
12-13 17:31