四、簡單動畫之緩衝運動
實現速度的緩衝，即不同位置的速度不同，越靠近目標值速度越小，所以速度值與目標值與當前值之差成正比。這裡要注意一個問題就是物體在運動中速度是連續變化的，不是按照整數變化的，當物體停止時由於小數的原因，位置可能不會回到原起點，會差一點，所以緩衝運動裡變化的速度要取整。
//鼠标移到元素上元素右移，鼠标离开元素回去。
var timer="";
function Move(locat) {//移动终点位置
var ob=document.getElementById('box1');
clearInterval(timer);
timer=setInterval(function () {
var speed=(locat-ob.offsetLeft)/10;//speed的大小和移动距离成正比，分母控制缓冲的快慢，即比例系数K，可调整
speed=speed>0?Math.ceil(speed):Math.floor(speed);//凡是缓冲运动速度一定要取整！！！向右运动时坐标向上取整，向左运动时坐标向下取整
if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
clearInterval(timer);
} else {
ob.style.left=ob.offsetLeft+speed+'px';
}
}, 30)
}在下面的HTML文件裡呼叫上面的JS函數。還用上次的那個div為例：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
}
</style><div id="box1"></div>
<script type="text/javascript">
window.onload=function(){
var ob=document.getElementById('box1');
ob.onmouseover=function(){
Move(200);
}
ob.onmouseout=function(){
Move(0);
}
}
</script>以上就是js動畫學習（二）的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
