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 © 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
