javascriptでバッファ運動を実現します.

1968 ワード

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.ceir()を上に向けて整理し、Math.flor()を下に向けて整理します.
divが広くなって上に整理します.divが元の幅に戻ると下に整理します.
さらに、onmousemooveとonmouseoutイベントを追加し、iTargetパラメータをstartMove関数に入力します.
上の完全コード:






<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>


<div id="div1"/>

</code></pre> 
  <br/> 
  <br/> 
 </div> 
</div>
                            </div>
                        </div>

JavaScriptを使ってH 5に右クリックイベントを追加します.