jquery動畫 -- 2.元素坐标動畫效果（建立一個圖檔走廊）

　　今天文章的内容是關于使用jquery的animate方法，修改html元素的position屬性，建立一個圖檔走廊。效果預覽圖檔：

　　大家可以下載下傳demo看完整效果，下面介紹制作過程。

　　1.首先建立一個html頁面，html結構如下：

　　大家一看就明白，viewer包含了幾張圖檔，ul對象裡面包含了‘上一條’、‘下一條’和各個圖檔對應的導航。

　　2.接下來需要為這些html元素設定css樣式，css我就不多說了，就是給viewer、圖檔等元素加樣式，viewer同時隻能顯示一張圖檔：

　　3.為頁面添加jquery和jquery.easing.1.3.js的引用。然後就是我們這篇的重頭了，為導航編寫相應的js事件。

　　首先我們需要建立一個新的div來包裝5張圖檔。

　　接下來我們使用jquery的selector找到slider，slide，prev，next等對象，把他們存到相應的js變量中。

　　建立兩個新的js變量，key儲存目前活動圖檔id，details儲存所有圖檔各自的position和title資訊。

　　為了顯示圖檔标題，我們需要添加一個h2标題到頁面。

　　上述工作完成後，就可以開始為a标簽添加click事件了，這裡的a标簽分兩種，一種是‘上一條’和‘下一條’，另外一種是各圖檔對應的導航。我們需要分别為他們添加相應的click事件。但是他們都會使用到一個相同的回調函數，我們先完成回調函數的編寫。代碼思路我就直接以注釋的方式完成。

　　接下來我們完成‘上一條’和‘下一條’導航的功能。

　　最後是圖檔對應的各自導航的功能實作。

　　本課的内容完畢了，大家可以下載下傳demo，檢視功能具體是如下實作的。

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>