用javascript實作緩沖運動

用javascript實作一個小功能。當滑鼠移動到div上時，div變寬；當滑鼠移除div時，div恢複原來的寬度，可用緩沖運動實作。

緩沖運動的原理是：當div寬度逐漸變寬到目标寬度時，速度越來越慢，直至停止，即速度和距離目标點的距離成正比。

var timer = null;
function startMove(iTarget)
{
	var oDiv = document.getElementById("div1");
	clearInterval(timer);
	timer = setInterval(function()
		{
			var iSpeed = iTarget-oDiv.offsetWidth;
			iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
			if (iTarget == oDiv.offsetWidth)
			{
				clearInterval(timer);
			}
			else
			{
				oDiv.style.width = oDiv.offsetWidth + iSpeed +"px";
			}
		},30)
}

将速度iSpeed和目标點iTarget設為參數，友善傳入資料。代碼用定時器來實作。

首先速度是目标點減去div的寬度，再除以8的原因是直接相減會導緻速度非常大，這樣運動會直接到達目标點，沒有中間的過程。

除以8會有小數點的情況，需要Math.ceil()向上取整，Math.floor()向下取整。

div變寬向上取整，div變回原來的寬度則向下取整。

再添加onmousemove和onmouseout事件将iTarget參數傳入startMove函數中。

上完整代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1
{
	position: absolute;
	width: 300px;
	height: 200px;
	background-color: blue;
}
</style>
<script>
window.onload = function()
{
	var oDiv = document.getElementById("div1");
	oDiv.onmousemove = function()
	{
		startMove(500)
	}
	oDiv.onmouseout = function()
	{
		startMove(300)
	}
}
var timer = null;
function startMove(iTarget)
{
	var oDiv = document.getElementById("div1");
	clearInterval(timer);
	timer = setInterval(function()
		{
			var iSpeed = iTarget-oDiv.offsetWidth;
			iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
			if (iTarget == oDiv.offsetWidth)
			{
				clearInterval(timer);
			}
			else
			{
				oDiv.style.width = oDiv.offsetWidth + iSpeed +"px";
			}
		},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>