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.场景切换

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值