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

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

　　其實他實現的功能還是好理解的，就是有一個母頁面，母頁面會加載一定數目的子頁面，母頁面上有各個子頁面的link。默認母頁面顯示第一個子頁面的內容，當點擊母頁面上的鏈接時，顯示相應子頁面的內容。這里的母頁面和子頁面是實際存在的不同頁面，但是整個動畫實現的結果是，所有頁面的切換都是在母頁面上實現的，url並沒有發生變化。要是大家還不知道是怎么回事，那就下載demo看運行效果吧，一看便知。

　　

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

<div id="outer-container">
    <header>
        <h1>
            A Whole Site on a Single Page</h1>
        <nav class="clear-float">
            <ul>
                <li><a class="on" href="single-page-site-1.html" title="Page 1">Page 1</a></li>
                <li><a href="single-page-site-2.html" title="Page 2">Page 2</a></li>
                <li><a href="single-page-site-3.html" title="Page 3">Page 3</a></li>
                <li><a href="single-page-site-4.html" title="Page 4">Page 4</a></li>
                <li><a href="single-page-site-5.html" title="Page 5">Page 5</a></li>
            </ul>
        </nav>
    </header>
    <div id="content">
    </div>
    <footer>
        <small>Copyright &copy; Dan Wellman 2010</small>
        <nav class="clear-float">
            <ul>
                <li><a href="single-page-site-1.html" title="Page 1">Page 1</a></li>
                <li><a href="single-page-site-2.html" title="Page 2">Page 2</a></li>
                <li><a href="single-page-site-3.html" title="Page 3">Page 3</a></li>
                <li><a href="single-page-site-4.html" title="Page 4">Page 4</a></li>
                <li><a href="single-page-site-5.html" title="Page 5">Page 5</a></li>
            </ul>
        </nav>
    </footer>
</div>

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

<div id="content">
    <h1>
        Single Page Site Page 1</h1>
    <p>
        This is the page 1 of the site</p>
    <p>
        Single Page Site Page 1</p>
</div>

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

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

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

//清空內容載體
$('#content').empty();

//獲取window對象
var win = $(window),
//獲取頭部導航link
links = $('header nav a'),
//獲取內容載體
content = $('#content'),
//定義內容頁定位對象
positions = {},
//定義屏幕高寬對象
screensize = {
    width: win.width(),
    height: win.height()
},

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

//定義內容頁載體
pages = $('<div></div>', {
    id: 'pages'
}).bind('contentLoaded', function () { //這里定義了一個自定義事件contentLoaded
    //將內容頁載體對象添加到內容載體對象
    $(this).appendTo(content).parent().addClass('full');

    //定義內容載體對象的高和寬
    content.width(screensize.width * links.length);
    content.height(screensize.height * 2);
    //固定header和footer，同時設置body的padding-top，這樣切換頁面的時候，加載的新頁面不會覆蓋在header上
    content.parent().find('header,footer').addClass('fixed')
            .closest('body').css('padding-top', $('header').outerHeight());
                
    //為header和footer的a標簽添加click事件
    links.add('footer nav a').click(function (e) {
        //阻止默認事件
        e.preventDefault();

        //獲取要顯示的子頁面的id
        var id = (this.href.indexOf('#') != -1) ? this.href.split('#')[1] : 'page-' + this.title.split(' ')[1];
        //獲取header和footer對象
        var navs = $('header').add('footer');
        //導航消失
        navs.fadeOut('fast');
        //這里我們用到了jquery.scrollTo.js插件，實現頁面的移動效果
        $.scrollTo({
            top: positions[id].top,
            left: positions[id].left
        }, 800, function () {
            //動畫結束，顯示導航
            navs.slideDown('fast');
        });
    });
});

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

//遍歷links對象，加載相應的子頁面
links.each(function (i) {
    //獲取需要加載的子頁面的id
    var id = 'page-' + (i + 1);
    //設置子頁面偏移量對象
    positions[id] = {};
    positions[id].left = screensize.width * i;
    positions[id].top = (i % 2) ? screensize.height : 0;

    //通過load事件加載子頁面，並添加到子頁面容器pages中
    //這里要注意load方法上的細節' #content > *'，你必須保證你需要加載的子頁面中包含有id為content的內容，
    //load只會加載#content里面的內容
    $('<div></div>', {
        'class': 'page',
        load: this.href + ' #content > *'
    }).css({
        left: positions[id].left,
        top: positions[id].top
    }).appendTo(pages);

    this.href = '#' + id;

    //當所有子頁面加載完畢后出發自定義事件contentLoaded
    if (i == links.length - 1) {
        pages.trigger('contentLoaded');
    }
});

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

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

　　demo下載地址：jQuery.animation.singlePageSite.zip