运动运动就是speed值不变
加速运动就是speed++；
减速运动就是：speed--，速度会越来越慢，当speed<0，开始反方向运动
弹性运动就是，沿着一个目标位置左右来回摆动最后停止在目标位置，其实就是加速运动和减速运动的结合
下图，以300px的位置为摆动中心点，大概描述一下弹性运动的原理
将上图的描述转化为代码如下：
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeed=0;
function startMove(){
var oDiv=document.getElementById('div1');
setInterval(function (){
if(oDiv.offsetLeft<300){
iSpeed++;
}
else{
iSpeed--;
}
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div style="position:absolute; width:1px; height:300px; left:300px; top:0; background:black;">
</div>
</body>
以上代码中speed是++或者--的方式，可以转化为
iSpeed+=1;
iSpeed-=1;
可以看出其中的1，其实就是速度
真实的弹性运行时离中心点越远，其实速度越大，显然1这个数字并不能满足；
即将spped的部分作出如下修改
if(oDiv.offsetLeft<300){
iSpeed+=(300-oDiv.offsetLeft)/50;//这个数字随意，看你实际需要
}
else{
iSpeed-=(oDiv.offsetLeft-300)/50; // 这时 offsetLeft大于300，即可以这么写
}
数学好的可以一眼看出这里可以再合并一下：
iSpeed+=(300-oDiv.offsetLeft)/50;
上面的整个if判断就可以这么处理了
生活中的弹性运行的物体一般是越弹速度越慢直到停止运动，但是以上的方式并不能使运动停止，想要运动停止就需要添加摩擦；
添加摩擦力的方式很简单，就是iSpeed*=0.95（这个数字随意，看你实际需要）
各种数字测试过后，我最喜欢的就是5和0.7，供参考
setInterval(function (){
iSpeed+=(300-oDiv.offsetLeft)/5;
iSpeed*=0.7;
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}, 30);
| style.left | 速度 | 速度+offsetLeft | 误差 |
|---|---|---|---|
| 0 | 3.5 | 3.5 | 0.5 |
| 3.5 | 2.8 | 6.3 | 0.3 |
| 6.3 | 1.9 | 8.2 | 0.2 |
到这里弹性运动已经差不多完成了，但是还存在一些小问题；
在一些项目中使用以上的代码可能会发现有的时候不会完全停在目标位置，会有一两个px的差距；如下图所示
因为speed是小数，而style.left真正的不会接受小数，通过offsetLeft获取之后只会是一个整数；
也就是说不管你上一次运行的速度是多少，你通过offsetLeft获取的上一次的结果都是整数
| style.left | 速度 | 速度+offsetLeft | 误差 |
|---|---|---|---|
| 0 | 3.5 | 3.5 | 0.5 |
| 3.5 | 2.8 | 6.3 | 0.3 |
| 6.3 | 1.9 | 8.2 | 0.2 |
以上只不过是放大版的误差，不管是放大还是原来的误差，误差累计到最后有1-2px的也有可能的；
所以这里不要直接用speed+offsetLeft ，应该设置一个中间变量，用来存speed的结果直接设置给style.left，这样就不会因为offsetLeft一直是整数带来误差；
为了方便使用，所以做了一点处理，并且封装成了一个公共方法，最后完整版代码如下
以下为完整的弹性运动框架的代码：
function startMove(obj, iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function (){
iSpeed+=(iTarget-obj.offsetLeft)/5;
iSpeed*=0.7;
left+=iSpeed;
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left=iTarget+'px';
}
else{
obj.style.left=left+'px';
}
}, 30);
}
