记录：变速动画函数封装之增加任意一个属性和回调函数及层级和透明度

最新推荐文章于 2023-11-22 19:55:36 发布

chengsi7955

最新推荐文章于 2023-11-22 19:55:36 发布

阅读量133

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/3848851/blog/1813803

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {

            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0;
            top: 0;
        }

        input {
            z-index: 10;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
  //点击按钮,改变宽度到达一个目标值,高度到达一个目标值

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }


  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[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) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }


  //zIndex:1000
  //透明度: 数字类型----小数---放大100倍
  my$("btn1").onclick = function () {

    var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
    animate(my$("dv"), json1, function () {
      animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
    });
  };

</script>
</body>
</html>

转载于:https://my.oschina.net/u/3848851/blog/1813803

chengsi7955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录：变速动画函数封装之增加任意一个属性和回调函数及层级和透明度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> ...
复制链接

扫一扫