H5+JS+CSS3 实现圣诞情缘--整体结构篇

1.布局结构

本动画是由3幅画面组成，每个主题页面会有不同的动画效果，因此三个页面分开实现。
三个页面的切换由JS动态控制。

<section class="container">
    <!-- 第一幅画面 -->
    <section class="page-a bg-adaptive">
    </section>
    <!-- 第二幅画面 -->
    <section class="page-b bg-adaptive">
    </section>
    <!-- 第三幅画面 -->
    <section class="page-c bg-adaptive">
    </section>
</section>

三个页面大小一致，会互相重叠，所以利用z-index属性决定三个页面的排列顺序。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
http://www.cnblogs.com/ForEvErNoME/p/3373641.html
http://www.w3school.com.cn/cssref/pr_pos_z-index.asp

querySelector()和querySelectorAll()的区别
http://www.runoob.com/jsref/met-document-queryselector.html

querySelector()和getElementById()的区别
http://www.imooc.com/article/13027

在学习获取页面元素时，注意到下面这行代码总是显示错误，查了很多资料，才发现

var page = document.querySelector("#page");

应该去掉 var

page = document.querySelector("#page");

这仅是个人查阅资料得来的灵感，如果有小伙伴遇到和我类似的问题，可以试试。

添加事件监听机制 addEventListener()：
http://www.jb51.net/article/49858.htm
http://www.runoob.com/js/js-htmldom-eventlistener.html

2.镜头效果

实现三个页面的切换效果，运用到之前讲过的animation动画。
请查看 http://blog.csdn.net/leapmotion1/article/details/72955015

引入Jquery.js 利用封装好的方法快速实现切换页面。
http://www.w3school.com.cn/jquery/attributes_addclass.asp

若是在实现动画效果时，出现页面覆盖问题，注意调节z-index的值。

3.代码封装

为了实现代码的“高内聚，低耦合”，作者引入了面向对象的思想。
在设计上，作者将每一个场景当作一个独立的”场景对象”，场景内部都封装了各自的子对象，对象与对象之间通过接口调用。简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点。

设计了3个独立的JS文件，并引入了一个公共的JS文件作为“中介”对象，通过接口调用各个对象。

在“中介”JS文件中，封装了一个公用函数，作为公用调用接口。

对于不了解JS闭包知识的小伙伴们，我找到了一个链接，知识普及非常简单易懂
http://www.cnblogs.com/wangfupeng1988/p/3977924.html

4.场景切换

这里运用到了观察者模式：一对多的关系。
场景切换是在每个场景动作结束后切换到另一个场景。为了避免代码耦合，场景之间尽量不要直接调用另外一个场景代码。