用JavaScript实现动画效果(1)

大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家

演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。

这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。

 1<html>
 2<head>
 3<title>JavaScript Motion Sample</title>
 4<script language="JavaScript">   
 5var movingID = null;   
 6var scrolling = false; 
 7
 8function startMove()   
 9{   
10var left = eval(div1.style.left.replace("px", ""));   
11if (left < document.body.scrollWidth - 150)   
12div1.style.left = left + 1;   
13else   
14div1.style.left = 10;   
15movingID = setTimeout("startMove()", 10);   
16} 
17
18function stopMove()   
19{   
20clearTimeout(movingID);   
21}   
22</script></head></html>