JavaScript动画
摘要：本例使用延时函数（setTimeout），缓慢地改变div的位置，从而实现了简单的动画效果。
实例JavaScript代码
我们定义了一个test函数，它设置testDiv的位置，并且延时10毫秒调用moveDiv函数。而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代码
本例的HTML代码只有一个简单的测试div，以及调用test函数的按钮。
<div id="testDiv"> <p>我是测试div，点击下面的按钮就可以看到div缓慢移动。</p> <p> <button onclick="test(); return false;" value="改变位置" >缓慢移动div的位置</button> </p> </div>演示
