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>