欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS---变速动画函数封装

程序员文章站 2022-05-29 08:13:11
变速动画函数封装 匀速动画:每次步数都是10 (var step=10;) 变速(缓动)动画:每次的步数是用当前位置和目标位置相减 var step=(target-current)/10; 代码如下:

变速动画函数封装

 

匀速动画:每次步数都是10 (var step=10;)

变速(缓动)动画:每次的步数是用当前位置和目标位置相减 var step=(target-current)/10;

JS---变速动画函数封装

 

 

代码如下:

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

<head>
  <meta charset="utf-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      margin-top: 20px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>

<body>
  <input type="button" value="移动到400px" id="btn1" />
  <input type="button" value="移动到800px" id="btn2" />
  <div id="dv">
    <script src="common.js"></script>
    <script>
      //点击按钮移动div

      my$("btn1").onclick = function () {
        animate(my$("dv"), 400);
      };
      my$("btn2").onclick = function () {
        animate(my$("dv"), 800);
      };


      //变速动画函数

      function animate(element, target) {
        //清理定时器
        clearinterval(element.timeid);
        element.timeid = setinterval(function () {
          //获取元素的当前位置
          var current = element.offsetleft;
          //移动步数
          var step = (target - current) / 10;
          step = step > 0 ? math.ceil(step) : math.floor(step);
          current += step;
          element.style.left = current + "px";
          if (current == target) {
            //清理定时器
            clearinterval(element.timeid);
          }
          //测试代码
          console.log("目标位置:" + target + ",当前位置:" + current + ",步数:" + step);
        }, 20);
      }

    </script>
  </div>
</body>

</html>