你可以使用JavaScript來建立複雜的動畫其中包括但不限於：

煙火
淡入淡出效果
滾入或轉出
入頁面或出頁面
物件運動

本教學會給一個基本的了解如何使用JavaScript來建立一個動畫。

JavaScript可以按照某種模式，由一個邏輯等式或函式來確定移動至若干DOM元素(<IMG/>，<DIV>或任何其他HTML元素)頁面各處。

JavaScript提供以下要經常用於動畫程式兩種功能。

setTimeout( function, duration) - 從現在這個函式呼叫 duration 毫秒後的 function
setInterval(function, duration) - 每次持續duration 毫秒之後，此函式呼叫function。
clearTimeout(setTimeout_variable) - 這個函式呼叫清除任何計時器由setTimeout()函式設定。

JavaScript還可以設定一個數位，包括它在螢幕上的位置DOM物件的屬性。可以設定一個物件的頂部和左側的屬性在螢幕上的任何位置。下面是簡單的語法：

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

手動動畫：

所以，讓我們使用DOM物件的屬性和JavaScript函式如下的實現一個簡單的動畫：

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html>

下面是上面的例子的說明：

我們使用的是JavaScript函式的getElementById()來獲取一個DOM物件，然後將其分配給一個全域性變數 imgObj.
我們定義了一個初始化函式的init()來初始化imgObj，我們已經設定它的位置和左屬性。
我們呼叫初始化函式在視窗載入時。
最後，我們呼叫並將MoveRight()函式由10個畫素來增加左邊的距離。你也可以將其設定為一個負數值，以將其移動到左側。

自動動畫：

在上面的例子中，如我們所看到的，如何將影象移動到右每點選。可以通過使用JavaScript函式的setTimeout()如下自動完成這一過程：

<html>
<head>
<title>JavaScript Animation</title>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('myImage');
   imgObj.style.position= 'relative'; 
   imgObj.style.left = '0px'; 
}
function moveRight(){
   imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
   animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px'; 
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>

在這裡，我們增加更多的情趣。因此，讓我們看看新的功能：

並將 MoveRight()函式呼叫 setTimeout()函式來設定 imgObj 位置。
我們增加了一個新的函式stop()來清除由定時器設定的setTimeout()函式來設定物件在其初始位置。

翻轉用滑鼠事件：

下面是一個簡單的例子，顯示影象翻轉用滑鼠事件：

<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type="text/javascript">
<!--
if(document.images){
    var image1 = new Image();      // Preload an image
    image1.src = "/images/html.gif";
    var image2 = new Image();      // Preload second image
    image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href="#" onMouseOver="document.myImage.src=image2.src;"
            onMouseOut="document.myImage.src=image1.src;">
<img name="myImage" src="/images/html.gif" />
</a>
</body>
</html>

讓我們來看看有什麼不同的位置：

在載入這個頁面，if語句檢查影象物件存在的時間。如果影象物件是不可用的，該塊將不被執行
Image()建構函式建立並預裝名為image1的一個新的影象物件
src屬性指定的外部影象檔案的名稱叫 /images/html.gif
我們已經建立IMAGE2物件，並在這個物件分配/images/http.gif類似的方式
在＃（井號）禁用連結，瀏覽器不會嘗試去一個URL點選時。此連結的影象
當使用者的滑鼠移動到鏈路，而onmouseout事件處理程式，當使用者的滑鼠移動遠離鏈路（影象）被觸發onMouseOver事件處理程式被觸發
當滑鼠移動時在影象上，從第一影象到第二個在HTTP影象的變化。當滑鼠被從影象移離，則顯示原來的圖象
當滑鼠離開該連結時，初始影象html.gif將重新出現在螢幕上

JavaScript動畫

手動動畫：

自動動畫：

翻轉用滑鼠事件：