1、缓冲运动
• 逐渐变慢,最后停止
• 距离越远速度越大
– 速度由距离决定
– 速度 = (目标值 - 当前值 ) / 缩放系数
• 关于小数的取整问题
– Math.ceil(12.52) 向上取整
– Math.floor(8.99) 向下取整
2、缓冲运动的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
background: red;
left: 0;
top: 50px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer = null;
function startMove(iTarget) {
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function() {
var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
/*if(iSpeed>0)
{
iSpeed=Math.ceil(iSpeed);
}
else
{
iSpeed=Math.floor(iSpeed);
}*/
if (oDiv.offsetLeft == iTarget) //是否到达终点
{
clearInterval(timer); //到达终点
} else {
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px'; //到达之前
}
document.title = oDiv.offsetLeft + ',speed=' + iSpeed;
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" οnclick="startMove(300)" />
<div id="div1"></div>
<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
</body>
</html>