我们本章要介绍的是单页导航动画效果的实现，感觉有点拗口，其实我也不知道这个效果动画到底叫什么名字合适。
其实他实现的功能还是好理解的，就是有一个母页面，母页面会加载一定数目的子页面，母页面上有各个子页面的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事件。
好了，今天的可能就讲解完毕了，希望对大家有帮助。
评论列表: