JavaScript動畫
你可以使用JavaScript來創建複雜的動畫其中包括但不限於：
- 煙火
- 淡入淡出效果
- 滾入或轉出
- 入頁面或出頁面
- 對象運動
本教程會給一個基本的瞭解如何使用JavaScript來創建一個動畫。
JavaScript可以按照某種模式，由一個邏輯等式或函數來確定移動至若干DOM元素(，
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函數如下的實現一個簡單的動畫：
下面是上面的例子的說明：
我們使用的是JavaScript函數的getElementById()來獲取一個DOM對象，然後將其分配給一個全局變量 imgObj.
我們定義了一個初始化函數的init()來初始化imgObj，我們已經設置它的位置和左屬性。
我們調用初始化函數在窗口加載時。
最後，我們調用並將MoveRight()函數由10個像素來增加左邊的距離。你也可以將其設置爲一個負數值，以將其移動到左側。
自動動畫：
在上面的例子中，如我們所看到的，如何將圖像移動到右每點擊。可以通過使用JavaScript函數的setTimeout()如下自動完成這一過程：
在這裏，我們增加更多的情趣。因此，讓我們看看新的功能：
並將 MoveRight()函數調用 setTimeout()函數來設置 imgObj 位置。
我們增加了一個新的函數stop()來清除由定時器設定的setTimeout()函數來設置對象在其初始位置。
翻轉用鼠標事件：
下面是一個簡單的例子，顯示圖像翻轉用鼠標事件：
Move your mouse over the image to see the result
讓我們來看看有什麼不同的位置：
在加載這個頁面，if語句檢查圖像對象存在的時間。如果圖像對象是不可用的，該塊將不被執行
Image()構造函數創建並預裝名爲image1的一個新的圖像對象
src屬性指定的外部圖像文件的名稱叫 /images/html.gif
我們已經創建IMAGE2對象，並在這個對象分配/images/http.gif類似的方式
在＃（井號）禁用鏈接，瀏覽器不會嘗試去一個URL點擊時。此鏈接的圖像
當用戶的鼠標移動到鏈路，而onmouseout事件處理程序，當用戶的鼠標移動遠離鏈路（圖像）被觸發onMouseOver事件處理程序被觸發
當鼠標移動時在圖像上，從第一圖像到第二個在HTTP圖像的變化。當鼠標被從圖像移離，則顯示原來的圖象
當鼠標離開該鏈接時，初始圖像html.gif將重新出現在屏幕上