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

JS---封装缓动(变速)动画函数---增加任意一个属性

程序员文章站 2023-09-28 23:13:42
封装缓动(变速)动画 增加任意一个属性 1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性) 2. 现在改变为,获取任意一个属性,使其移动到指定的target,相当于在原animate(element,target)函数上,增加了一个属性,变为animate(e ......

封装缓动(变速)动画---增加任意一个属性

 

1. 本来的变速动画函数,是获取特定的属性(之前案例是向右移动,所以获取的是left属性)

2. 现在改变为,获取任意一个属性,使其移动到指定的target,相当于在原animate(element,target)函数上,增加了一个属性,变为animate(element, attr, target)函数

3. 改动一:在获取当前元素的位置,var current,用getstyle来获取,因为得到的是字符串类型,包一个parseint改为数字类型;

4. 改动二:移动步数时候,元素的当前位置等于current+"px",element.style.left更新为element.style[attr], 特定的元素用任意元素取代

 

获得的效果:就是可以使任意元素的,任意一个样式属性,移动到指定的目标位置

attr位置,可以改为left,可以改为heigth, 可以改为top,可以改为bgc....等等

<!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 () {
        //获取div此时left的当前位置,达到目标400
        // animate(my$("dv"),"left",400);
        //获取div此时的宽度,达到目标200
        animate(my$("dv"), "width", 200);
      };

      //获取任意的一个属性的当前的属性值: 改用之前封装的getstyle函数
      function getstyle(element, attr) {
        //判断浏览器是否支持这个方法
        return window.getcomputedstyle ? window.getcomputedstyle(element, null)[attr] : element.currentstyle[attr];
      }

      //匀速动画

      //element---元素
      //attr---属性名字
      //target---目标位置
      function animate(element, attr, target) {
        //清理定时器
        clearinterval(element.timeid);
        element.timeid = setinterval(function () {
          //获取元素的当前位置
          var current = parseint(getstyle(element, attr));//数字类型//===============================
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? math.ceil(step) : math.floor(step);
          current += step;
          element.style[attr] = current + "px";//============================================
          if (current == target) {
            //清理定时器
            clearinterval(element.timeid);
          }
          //测试代码:
          console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
        }, 20);
      }
    </script>
  </div>
</body>

</html>