JavaScriptアニメーション
この例では、遅延関数を使用して、divの位置をゆっくりと変えて、簡単なアニメーション効果を実現します.
実例JavaScriptコード
testDivの位置を設定し,10ミリ秒遅延してmoveDiv関数を呼び出すtest関数を定義した.一方、moveDiv関数は、テストdivの現在の位置をチェックし、x座標が50にならないと右にピクセルを移動します.また、10ミリ秒前に自分を呼び出します.これがアニメの効果になります.
<script type="text/javascript">
function test(){
var testDiv = document.getElementById("testDiv");
testDiv.style.top = "0px";
testDiv.style.left = "0px";
movement = setTimeout("moveDiv()",10);
}
function moveDiv(){
var testDiv = document.getElementById("testDiv");
var xPos = parseInt(testDiv.style.left);
if (xPos == 50) {
return true;
}
xPos++;
testDiv.style.left = xPos + "px";
movement = setTimeout("moveDiv()",10);
}
</script>この例のHTMLコードは簡単なテストdivとtest関数を呼び出すボタンしかありません.
<div id="testDiv">
<p> div， div 。</p>
<p>
<button onclick="test(); return false;" value=" " > div </button>
</p>
</div>テストdivです.下のボタンを押すと、divがゆっくり動くのが見えます.
divの位置をゆっくり移動します.