缓动的小球

最新推荐文章于 2022-04-27 16:09:35 发布

吴默涵1

最新推荐文章于 2022-04-27 16:09:35 发布

阅读量812

点赞数

本文链接：https://blog.csdn.net/wu964521/article/details/102537907

版权

设定盒子box

<!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>

为小球绑定单击事件，并设置小球初始位置。
为防止多次出发事件，通过clearinterval 设定计时器。

    <script>
      function animate(obj, option) {
       clearImmediate(obj.timer);                           // 防止多次触发事件，重复开启定时器
        obj.timer = setInterval(function() {
          var flag = true;

获取id值为box的小球，通过动态的方式完成单击事件，调用animate（）自定义函数完成动画的实现。

      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);
          }
        }, 1);
      }
      function getStyle(obj, attr) {
        if (window.getComputedStyle) {        // 标准浏览器
          return window.getComputedStyle(obj, null)[attr];
        } else {                              // 早期版本IE的浏览器，IE6~8
          return obj.currentStyle[attr];
        }
      }

吴默涵1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
缓动的小球

设定盒子box<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>缓动的小球</title> <style> #box{position:absolute;width:120px;height:120px;line-height:1...
复制链接

扫一扫