封装简单动画函数

/*

1.首先在写元素样式时一定要给元素添加位置
2.获取元素位置，offsetLeft
2.通过setInterval定时器完成动态效果
3.加一个停止定时器的效果clearInterval
4.添加一个按钮，这样点击按钮才会触发事件
5.另外在事件里面前面记得先清除定时器
 */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装简单动画函数</title>
  <style>
    div {
      position: absolute;
      left: 0px;
      height: 100px;
      width: 100px;
      background-color: pink;
    }

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

<body>
   <button class="zyt">点击祝英台</button>
  <button class="lsb">点击梁山伯</button>
  <div>梁山伯</div>
  <span>祝英台</span>
 
  <script>
    //传2个参数，对象obj,移动位置距离target
    // 举例，var obj={} obj.name="tom",可以这样写的
    function animate(obj, target) {
       // 因为添加了点击按钮，防止打开多个定时器，所以每次使用前，清除之前的定时器
       clearInterval(obj.timer)
      obj.timer = setInterval(function () {//不用var进行声明的原因是因为，如果多个元素 调用的话，会开辟多个空间，消耗内存，根据js对象可以动态添加属性
       
        if (obj.offsetLeft >= target) {
          // 停止动画，理论上是停止定时器
          clearInterval(obj.timer)
        }
        obj.style.left = obj.offsetLeft + 1 + 'px'
      }, 30)
    }
    var div = document.querySelector('div')
    var span = document.querySelector('span')
    var lsb = document.querySelector('.lsb')
    var zyt = document.querySelector('.zyt')
    // 点击梁山伯进行触发
    
    lsb.addEventListener('click', function () {
      animate(div, 300)
    })
    // 点击祝英台进行触发
    zyt.addEventListener('click', function () {
      animate(span, 500)
    })



  </script>
</body>

</html>

封装简单动画函数

/*

猜你喜欢