单属性运动函数封装

最新推荐文章于 2022-08-10 21:30:58 发布

黄酱！

最新推荐文章于 2022-08-10 21:30:58 发布

阅读量354

点赞数

分类专栏： JS 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/tianranran/article/details/122527065

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

JS
function $(selector, all) {
  if (all) {
    return document.querySelectorAll(selector)
  }
  return document.querySelector(selector)
}

<style>
    .box, .box2 {
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: #f00;
      top: 50px;
      left: 100px;
    }

    .box2 {
      top: 200px;
    }
  </style>
</head>
<body>
  <div class="box">abc</div>
  <div class="box2">box2</div>

  <script src="js/tools.js"></script>
  <script>
    /**
     * 运动函数
     * @param element 待实现运动效果的元素
     * @param attrName 操作的CSS属性名称
     * @param end 运动目标终点值
     * @param duration 运动总时长限制
     */
    function animate(element, attrName, end, duration) {
      // 先清除定时器
      clearInterval(element.timer)
      // 起始
      const start = parseFloat(css(element, attrName))

      // 运动起始时间
      const startTime = Date.now()
      // 开始运动，在当前 element 元素上绑定 timer 属性
      // 用于记录定时器的 id（添加自定义属性）
      element.timer = setInterval(() => {
        // 获取到回调函数执行这一刻的时间
        const currentTime = Date.now()
        // 计算当前时间与运动起始时间差
        const elapsed = Math.min(currentTime - startTime, duration)
        // 按照公式，计算
        const result = elapsed * (end - start) / duration + start
        // 设置元素CSS属性值
        element.style[attrName] = result + 'px'
        // 判断是否到达终点，到达终点，停止定时器
        if (elapsed === duration) {
          clearInterval(element.timer)
        }
      }, 1000 / 60)
    }

    $('.box').onmouseover = function() {
      animate(this, 'width', 300, 1000)
    }

    $('.box').onmouseout = function() {
      animate(this, 'width', 100, 1000)
    }

    $('.box2').onmouseover = function() {
      animate(this, 'width', 400, 1000)
    }

    $('.box2').onmouseout = function() {
      animate(this, 'width', 100, 1000)
    }
  </script>
</body>

黄酱！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单属性运动函数封装

JSfunction $(selector, all) { if (all) { return document.querySelectorAll(selector) } return document.querySelector(selector)}<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-
复制链接

扫一扫