点我，跑！

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

张悦是个好人

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

阅读量111

点赞数

本文链接：https://blog.csdn.net/qq_45337854/article/details/102537107

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!DOCTYPE html>
		  <head>
		    <meta charset="UTF-8">
		    <title>缓动的小球</title>
		    <style>
		      #box{position:absolute;width:150px;height:150px;line-height:150px;text-align:center;background:red;color:#fff;border-radius:80px;}
		    </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': 600, 'top': 300});
		      };
		    </script>
		  </body>
		<ml>

		
	</body>
</html>