核心思想：
(1)相对于匀速移动，盒子每次移动的步长都是变化的，公式：盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10
(2)在盒子位置与目标距离小于10px时，其步长必然是小数，又由于offsetLeft的变态的逢4进值，那么只要小数点的值小于4就会停滞不前
(3)所以要么往上取整，要么往下取整
1、Math.ceil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var divEle = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
//当目标距离与实际距离小于10px时，会以1px的速度前进
var step = (400 - divEle.offsetLeft) / 10;
step = Math.ceil(step);
divEle.style.left = divEle.offsetLeft + step + "px";
if (Math.abs(400 - divEle.offsetLeft) <= Math.abs(step)) {
divEle.style.left = "400px";
clearInterval(timer);
}
}, 15)
}
</script>
</body>
</html>
2、Math.floor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 400px;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var divEle = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
//当目标距离与实际距离小于10px时，会以1px的速度前进
var step = (0 - divEle.offsetLeft) / 10;
step = Math.floor(step);
divEle.style.left = divEle.offsetLeft + step + "px";
if (Math.abs(0 - divEle.offsetLeft) <= Math.abs(step)) {
divEle.style.left = 0;
clearInterval(timer);
}
}, 15)
}
</script>
</body>
</html>
3、封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<button>回到起点</button>
<button>回到200</button>
<button>回到400</button>
<div></div>
<script>
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var btn3 = document.getElementsByTagName("button")[2];
var divEle = document.getElementsByTagName("div")[0];
btn1.onclick = function () {
animate(divEle, 0);
}
btn2.onclick = function () {
animate(divEle, 200);
}
btn3.onclick = function () {
animate(divEle, 400);
} function animate(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target - ele.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 15);
}
</script>
</body>
</html>