<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
// 核心原理:通过定时器setInterval()不断移动盒子位置
// 1.获得盒子当前位置
// 2.让盒子在当前位置上加上n个移动距离
// 3.利用定时器不断重复这个操作
// 4.加一个结束定时器的条件
// 5.注意此元素需要添加定位,才能使用element、style、left
// 缓动动画:(目标值-现在的位置)/10
function animate(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
callback && callback();
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var btn = document.querySelector("button");
var div = document.querySelector("div");
btn.addEventListener("click", function () {
animate(div, 500);
})
</script>
</body>
</html>
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交