JavaScript动画

实例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 οnclick="test(); return false;" value="改变位置" >缓慢移动div的位置</button>
</p>
</div>