html 自定义属性_BOM - 封装动画属性

最新推荐文章于 2022-09-21 17:07:48 发布

三只小猪宝贝乐

最新推荐文章于 2022-09-21 17:07:48 发布

阅读量87

点赞数

文章标签： html 自定义属性

本文链接：https://blog.csdn.net/weixin_33894125/article/details/113077301

版权

好好学些，天天向上

本章主要内容是：封装动画属性的参考代码

common.js

// 定义一个获取元素的函数
function my$(id) {
    return document.getElementById(id);
  }
  
  // DOM 2 级事件绑定方式
  // 自己制作一个兼容所有浏览器的绑定事件的函数
  // 参数：事件源，事件类型，事件函数
  function addEvent(ele, type, fn) {
    // IE 9 及以上的浏览器和其他浏览器，使用 addEventListener 方法
    // IE 9 以下的浏览器，使用 attachEvent 方法
    // 浏览器能力检测
    if (ele.addEventListener) {
      ele.addEventListener(type, fn);
    } else if (ele.attachEvent) {
      ele.attachEvent("on" + type, fn);
    }
  }
  
  // 兼容所有浏览器的 解除绑定事件的函数
  // 参数：事件源，事件类型，事件函数
  function removeEvent(ele, type, fn) {
    // 浏览器能力检测
    if (ele.removeEventListener) {
      ele.removeEventListener(type, fn);
    } else if (ele.detachEvent) {
      ele.detachEvent("on" + type, fn);
    }
  }

animate.js

// 多属性运动
// 共同点：总时间、时间间隔是相同的，自定义
// 不同的：起始位置（通过程序方法自动获取当前页面最终显示效果）和结束位置（自定义指定的）

// 函数参数
// 参数1：元素对象，它要进行运动
// 参数2：结束位置，以对象数据方式传递
// 参数3：总时间
// 自定义动画函数
function animate(ele,end,time) {
    // 已知结束位置，总时间，时间间隔 50，缺少起始位置
    // 起始位置要根据结束位置提供的属性进行获取
    // 起始位置的对象，需要先定义一个空对象
    var now = {};
    // start.left = 100;
    // end 对象遍历，获取属性名
    for (var k in end) {
      now[k] = parseFloat(window.getComputedStyle(ele)[k]);
    }
    // console.log(start);
    // 自定义时间间隔
    var interval = 50;
    // 计算总次数
    var maxCount = time / interval;
    // 次数累加器
    var count = 0;
    // 对象中的每个属性都有自己的步长，也可以放到一个步长对象中
    var step = {};
    // 遍历结束对象，计算每个属性的步长
    for (var k in end) {
      step[k] = (end[k] - now[k]) / maxCount;
    }
    // console.log(step);
    // ====================准备工作结束，开启定时器=========================
    var timer;
    timer = setInterval(function () {
      // 让每个属性发生变化，赋值给 now 对象中的每一项
      for (var k in end) {
        now[k] += step[k];
      }
      // 累计运动次数
      count++;
      // 判断定时器是否结束
      if (count >= maxCount) {
        // 拉终停表
        for (var k in end) {
          now[k] = end[k];
        }
        clearInterval(timer);
      }
      // 赋值给对应元素对象属性
      for (var k in now) {
        // 判断如果是 不透明度属性，不要加px单位
        if (k === "opacity") {
          ele.style[k] = now[k];
        } else {
          ele.style[k] = now[k] + "px";
        }
      }
  
    },interval);
  }

封装动画函数.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      position: absolute;
      top: 100px;
      left: 0;
      width: 100px;
      height: 100px;
      opacity: 0.5;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <input type="button" value="开始" id="start">
  <div class="box" id="box"></div>
  <script src="js/common.js"></script>
  <script src="js/animate.js"></script>
  <script>
    // 获取元素
    var start = my$("start");
    var box = my$("box");
    // 补充 获取计算后样式的方法
    // console.dir(window.getComputedStyle(box));
    // console.log(window.getComputedStyle(box).width);
    // console.log(window.getComputedStyle(box).height);
    // console.log(window.getComputedStyle(box).backgroundColor);
    // console.log(window.getComputedStyle(box)["opacity"]);
    
    // box 是需要运动的元素
    // 多属性运动
    // 共同点：总时间、时间间隔是相同的，自定义
    // 不同的：起始位置（通过程序方法自动获取当前页面最终显示效果）和结束位置（自定义指定的）

    // 函数参数
    // 参数1：元素对象，它要进行运动
    // 参数2：结束位置，以对象数据方式传递
    // 参数3：总时间

    // 调用函数
    start.onclick = function () {
      animate(box,{left: 400,width: 300},2000);
    };

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

效果：

三只小猪宝贝乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫