<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.div01 {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: red;
}
button {
position: absolute;
top: 200px;
}
ul,li{
list-style: none;
}
</style>
</head>
<body>
<div class="div01" id="div01"></div>
<button id='js-btn'>点击控制div</button>
<script>
/******************************************
缓冲运动的实际原理就是两个物体的距离相减在除
一个数，同时要注意给这个速度值取整
******************************************/
window.onload = function () {
var div01 = document.getElementById('div01');
var btn = document.getElementById('js-btn');
var timer = null;
function startMove (iTarget) {
timer = setInterval(function(){
var speed = 0;
speed = (iTarget-div01.offsetLeft)/8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if( div01.offsetLeft <= iTarget ){
div01.style.left = div01.offsetLeft + speed + "px";
document.title = div01.offsetLeft + "..." + speed;
}else{
clearInterval(timer);
}
},100);
}
btn.onclick = function () {
startMove(300);
};
};
</script>
</body>
</html>
