详细代码
<body>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="box"></div>
<script>
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
var box = document.getElementById('box');
btn1.onclick = function () {
animation(box, 400);
}
btn2.onclick = function () {
animation(box, 800);
}
function animation (element, target) {
//先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval (function() {
//获取div当前位置，
var current = element.offsetLeft;//数据类型，没有px
// div 每次移动多少像素
var step = 10;
//当前位置小于目标位置，走正数，否则走负数
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前位置是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + 'px';
}else {
clearInterval(timeId);
//最后一次剩余要走的步数小于每次要走的步数，那么直接到达终点
element.style.left = target + 'px';
}
},20);
}
</script>
</body>原文：https://www.cnblogs.com/1020-jj/p/11040607.html