jquery動畫 -- 5.單頁導航動畫效果的實作

　　我們本章要介紹的是單頁導航動畫效果的實作，感覺有點拗口，其實我也不知道這個效果動畫到底叫什麼名字合适。

　　其實他實作的功能還是好了解的，就是有一個母頁面，母頁面會加載一定數目的子頁面，母頁面上有各個子頁面的link。預設母頁面顯示第一個子頁面的内容，當點選母頁面上的連結時，顯示相應子頁面的内容。這裡的母頁面和子頁面是實際存在的不同頁面，但是整個動畫實作的結果是，所有頁面的切換都是在母頁面上實作的，url并沒有發生變化。要是大家還不知道是怎麼回事，那就下載下傳demo看運作效果吧，一看便知。

　　

　　好了不說廢話了，開始我們的教程。第一步是建立母頁面的html代碼。

　　接下來是子頁面的，每個子頁面内容差不多，我隻展示第一個子頁面的内容。

　　這裡需要注意的是，必須保證子頁面的内容是被一個id為content的容器包圍着，因為js代碼中我們使用load的方法的時候需要用到這個id！

　　html定義完了就需要定義css了，這裡我就不貼了，有點浪費篇幅。大家下載下傳源碼，自己去看css吧。

　　在建立js代碼之前，母頁面需要引用jquery和一個叫做jquery.scrollTo.js的jquery插件，然後我們就可以正式開始書寫js了（jquery.scrollTo.js是jquery插件站點提供的一個插件，我demo中有，大家就不需要額外下載下傳了）。接下來就是我們實作的js代碼了。

　　這段代碼比較簡單，就是定義了一些變量。

　　這段代碼是比較核心的一部分代碼，實作的功能就是定義了子頁面總的包裝容器pages，為它建立了自定義的contentLoaded事件，在該事件中将pages對象添加到母頁面中，并為header和footer中的a标簽定義click事件。代碼裡面有注釋，希望能幫助大家了解代碼，如果還是看不懂，可以給我留言。

　　上面的代碼實作的功能是加載各個子頁面，定義他們的偏移量，當所有子頁面加載完畢後觸發contentLoaded事件。

　　好了，今天的可能就講解完畢了，希望對大家有幫助。

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