<!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>
缓动的小球
最新推荐文章于 2022-04-27 16:09:35 发布