缓动的小球

本文链接： https://blog.csdn.net/qq_45683093/article/details/102510514
<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <title>缓动的小球</title>
    <style>
      #box{position:absolute;width:120px;height:120px;line-height:120px;text-align:center;background:red;color:#fff;border-radius:60px;}
    </style>
  </head>
  <body>
    <div id="box">点我啊，跑！</div>
    <script>
      function animate(obj, option) {
        clearInterval(obj.timer);                           // 防止多次触发事件，重复开启定时器
        obj.timer = setInterval(function() {
          var flag = true;                                  // 元素对象移动的标志，true表示已完成
          for (var k in option) {
            var leader = parseInt(getStyle(obj, k)) || 0;   // 获取指定元素当前属性值
            var target = option[k];                         // 获取指定元素目标属性值
            var step = (target - leader) / 10;              // 计算每次移动的步长
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;           // 计算属性值
            obj.style[k] = leader + 'px';     // 设置属性值
            if (leader != target) {           // 判断是否完成移动
              flag = false;
            }
          }
          if (flag) {                         // 移动完成后清除定时器
            clearInterval(obj.timer);
          }
        }, 15);
      }
      function getStyle(obj, attr) {
        if (window.getComputedStyle) {        // 标准浏览器
          return window.getComputedStyle(obj, null)[attr];
        } else {                              // 早期版本IE的浏览器，IE6~8
          return obj.currentStyle[attr];
        }
      }
      var obj = document.getElementById('box');
      obj.onclick = function() {
        animate(obj, {'left': 500, 'top': 300});
      };
    </script>
  </body>
</html>
猜你喜欢
