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>

效果

我是测试div，点击下面的按钮就可以看到div缓慢移动。

  1. 用javascript修改html元素的class
  2. JavaScript重定向
  3. JavaScript对象当作关联数组
  4. JavaScript弹出窗口以及窗口间的通信
  5. JavaScript显示信息实例
  6. 用JavaScript批量访问HTML元素
  7. 分离JavaScript与HTML
  8. JavaScript计算器实例
  9. JavaScript的Math对象计算器
  10. JavaScript改变HTML元素的位置
  11. JavaScript动画
  12. JavaScript动画函数
  13. JavaScript拖拽
  14. JavaScript拖拽2——多元素、分离JS
  15. JavaScript拖拽3——解决快速拖拽的问题
  16. addEventSimple函数，添加事件响应函数的方法
  17. addEventSimple观察鼠标事件
  18. JavaScript click事件深入
  19. JavaScript事件来源元素
  20. JavaScript修改与访问CSS
  21. JavaScript拖拽4——获得元素的位置
  22. JavaScript拖拽5——性能优化
  23. DOM Scripting相册
  24. DOM Scripting斑马表格
  25. DOM Scripting动画切图
  26. JavaScript颜色渐变
  27. JavaScript拖拽6——修复错误