用JavaScript實現動畫效果的方法

大家在使用Dreamweaver中的時間線功能或以做出很有趣的動畫效果Dreamweaver會自動為用戶生成特定的程序代碼大家有沒有想過動畫的實現原理呢？

　　其實原理是很簡單的主要是使用了一個計時器函數下面我為大家
演示一個簡單的動畫的制作過程通過有關的介紹大家可以舉一反三做出更多很炫的動畫效果
這個實例的效果是點擊網頁上的“開始移動”按鈕則其中的指定圖層就會從左到右移動在這個過程中你點擊“停止移動”按鈕就會停止移動

復制代碼代碼如下:
<html>
<head>
<title>JavaScript Motion Sample</title>
<script language="JavaScript">
var movingID = null;
var scrolling = false;
function startMove()
{
var left = eval(divstyleleftreplace("px" ""));
if (left < documentbodyscrollWidth )
divstyleleft = left + ;
　　else
　　 divstyleleft = ;
movingID = setTimeout("startMove()" );
}
function stopMove()
{
clearTimeout(movingID);
}
</script>
</head>
<body>
<div id="div" style="visibility:visible; position:absolute; left:; top:; zindex:;">
<table bgColor="#FFFFCC" border=""cellPadding="" cellSpacing="">
<tr>
<td>I can moving</td>
</tr>
</table>
</div>
<br><br>
<input type="button" value="開始移動" onClick="startMove()">
<input type="button" value="停止移動" onClick="stopMove()">
</body>
</html>

　　
這裡主要使用了一個叫setTimeout(function interval)函數這個函數的參數格式為
第一個參數“function”為超時後調用的函數名第二個參數“interval”為超時值以微秒為單位
注意一點是如果要停止這個計時器必須保存調用這個setTimeout()函數後的返回值通過clearTimeout(id)函數來取消計時器

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20321.html