js动画函数封装

周周_加油

于 2023-02-02 14:44:52 发布

阅读量148

点赞数

分类专栏：前端分享 Javascript分享文章标签：前端 javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_46703611/article/details/128850188

版权

前端分享同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

Javascript分享

7 篇文章 0 订阅

订阅专栏

mouse enter 和mouse over的区别

mouse enter 鼠标事件

类似，mouse over 他们两者的区别是

mouse over鼠标经过盒子会触发，经过盒子还会触发，mouse enter只会经过自身盒子才会触发。

动画函数封装

动画：

核心原理就是通过定时器不断移动盒子的位置。

实现步骤：

1. 获得当前盒子的位置

2.让盒子在当前位置上加上一个移动距离。

3.利用定时器不断的重复这个操作

4.加一个结束定时器的条件

5.注意元素需要添加单位才能使用element.style.left

2.动画函数的封装

注意函数需要传递两个参数：动画对象和移动到的距离。

十分简单的js动画封装函数

    <style>
      div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      span {
        position: absolute;
        top: 400px;
        display: block;
        width: 150px;
        height: 150px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <button>点击周周才走</button>
    <div></div>
    <span>周周</span>
    <script>
      let div = document.querySelector("div");
      let span = document.querySelector("span");
      let but = document.querySelector("button");

      function dhua(obj, tantes) {
        //清除以前的定时器，只保留当前一个定时器函数执行。
        clearInterval(obj.times);
        //给不同元素赋值,不会开辟新的空间。
        obj.times = setInterval(function () {
          if (obj.offsetLeft >= tantes) {
            clearInterval(times);
          }
          obj.style.left = obj.offsetLeft + 1 + "px";
        }, 30);
      }
      dhua(div, 300);
      but.addEventListener("click", function () {
        dhua(span, 200);
      });
    </script>
  </body>