使用原生JS方式实现序列帧动画

zluz_

于 2023-12-04 15:19:27 发布

阅读量357

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/zluz_/article/details/134785186

版权

<!DOCTYPE html>
<html>

<head>
  <title>使用原生JS方式实现序列帧动画</title>
  <style type="text/css">
    .machine {
      width: 250px;
      height: 250px;
      margin: 100px auto 0 auto;
      border-radius: 250px;
      box-shadow: 0px 0px 5px #888;
    }

    .machine .machine-box {
      width: 64px;
      height: 64px;
      margin: 0 auto;
      cursor: pointer;
      background-position: 0 0;
      background-size: 100%;
      transform: translateY(93px);
      background-image: url('https://img.alicdn.com/tfs/TB1qolSVhz1gK0jSZSgXXavwpXa-128-2688.png'); /* 阿里云官网找 */
    }
  </style>
</head>

<body>
  <div class="machine">
    <div class="machine-box"></div>
  </div>
</body>

<script type="text/javascript">

  let count = 0;
  let enterTimer;
  let leaveTimer;

  var o = document.getElementsByClassName("machine-box")[0];

  o.onmouseover = function() {
    clearInterval(leaveTimer),
      enterTimer = setInterval(function() {
        if (count < 20 && 64 * count < 1344) {
          count++;
          document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count + "px";
        } else {
          clearInterval(enterTimer)
        }
      }, 30);
  };

  o.onmouseout = function() {
    clearInterval(enterTimer),
      leaveTimer = setInterval(function() {
        if (count > 0 && 64 * count > 0) {
          count--;
          document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count + "px"
        } else {
          clearInterval(leaveTimer)
        }
      }, 30);
  };
</script>

</html>