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