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.场景切换
这里运用到了观察者模式:一对多的关系。
场景切换是在每个场景动作结束后切换到另一个场景。为了避免代码耦合,场景之间尽量不要直接调用另外一个场景代码。