纯 js 动画

最新推荐文章于 2024-06-10 22:18:41 发布

北【辰】、

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量88

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44803640/article/details/132397651

版权

js 实现动画函数

实现效果![在这里插入图片描述](https://img-blog.csdnimg.cn/82f25a2f94884dd7adf1d6f1812226c1.png)
- 实现代码

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        text-decoration: none;
      }

      .test {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
      }
      .but {
        width: 50px;
        height: 40px;
        background-color: rgb(0, 0, 0);
        color: #fff;
        margin-bottom: 12px;
        cursor: pointer;
        line-height: 40px;
        margin-left: 12px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div style="display: flex">
      <div class="but">按钮</div>
      <div class="but rest">重置按钮</div>
    </div>
    <div class="test"></div>
    <script>
      const but = document.querySelector(".but");
      const rest = document.querySelector(".rest");
      const test = document.querySelector(".test");

      function move(demo, { target, speed }) {
        let left = 0;
        let time = null;
        time = setInterval(() => {
          left = Math.ceil((target - demo.offsetLeft) / speed);
          if (demo.offsetLeft >= target) {
            clearInterval(time);
          }
          demo.style.left = demo.offsetLeft + left + "px";
        }, 10);
      }

      rest.onclick = function () {
        test.style.left = 0 + "px";
      };
      but.onclick = function () {
        move(test, {
          target: 800,
          speed: 14,
        });
      };
    </script>
  </body>
</html>