效果图
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速动画封装函数</title>
<style>
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
#box1 {
position: absolute;
top: 150px;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
<script>
var box = document.getElementById("box");
/*var box1 = document.getElementById("box1");*/
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
btn200.onclick = function () {
animate(box, 200);
};
btn400.onclick = function () {
animate(box, 400);
};
//封装匀速运动
function animate(obj, target) {
clearInterval(obj.timer);
var speed = obj.offsetLeft < target ? 5 : -5;
obj.timer = setInterval(function () {
var result = target - obj.offsetLeft;
obj.style.left = obj.offsetLeft + speed + "px";
if (Math.abs(result) <= 5) {
//说明到位置了,直接跳转到target
clearInterval(obj.timer);
obj.style.left = target + "px";
}
}, 30);
}
</script>