缓冲运动应用：
例子：跟随页面滚动的缓冲侧边栏
遇到问题：一个元素的left加小数是没有意义，会转成整数，造成死循环
解决技巧:
1、speed速度越来越慢,直到speed成小数设置speed取整行为，left每次加一直到目标点
2、根据方向speed为正时成小数向上进行取整，直到left为300停止定时器，反之向下取整
3、距离越远速度越大、公式：速度=（目标值-当前值）/缩放系数
4、潜在问题目标值不是整数，解决： 速度取整，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓冲减速运动</title>
<style>
*{margin:0;padding:0;}
#aa1 {position:absolute;left:500px;width:100px;height:100px;background:#F00;display:inline-block;}
#btn1 {position:absolute;top:120px;}
.line {position:absolute;left:300px;width:1px;height:500px;background:#000;}
</style>
</head>
<body>
<input type="button" value = "移动" id="btn1">
<div id="aa1"></div>
<div id="aa2"></div>
<div class='line'></div>
<script>
var oDiv = document.querySelector('#aa1');
var oBtn = document.querySelector('#btn1');
var timer=null;
oBtn.onclick=function(){
var speed=0;
clearInterval(timer);
timer = setInterval(function(){
//1、speed速度越来越慢,直到speed成小数取整，
speed =(300-oDiv.offsetLeft) / 8;
speed=speed<0?Math.floor(speed):Math.ceil(speed);
if(oDiv.offsetLeft == 300){
clearInterval(timer);
timer=null;
}
else {
oDiv.style.left = parseInt(oDiv.offsetLeft + speed) + 'px';
console.log( oDiv.style.left+', '+speed);
}
},20)
};
</script>
</body>
</html>