ThatManK Mobile Article

简单动画函数封装

Category: JS Tutorial: DOM实战 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: pink;
      }

      span {
        position: absolute;
        left: 0;
        top: 200px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: purple;
      }
    </style>
  </head>

  <body>
    <div></div>
    <span>夏雨荷</span>

    <script>
      // 简单动画函数封装obj目标对象 target 目标位置
      function animate(obj, target) {
        var timer = setInterval(function () {
          if (obj.offsetLeft >= target) {
            // 停止动画 本质是停止定时器
            clearInterval(timer);
          }
          obj.style.left = obj.offsetLeft + 1 + "px";
        }, 30);
      }

      var div = document.querySelector("div");
      var span = document.querySelector("span");

      // 调用函数
      animate(div, 300);
      animate(span, 200);
    </script>
  </body>
</html>