<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.js"></script>

页面切换部分的代码封装

封装，即隐藏对象的属性和实现细节，仅对外公开接口。

封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员

这个主题案例，我采用的是面向接口编程的写法，简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点

就拿页面切换的效果来说，在某一时刻，元素A需要让页面进行切换，那么元素A不需要关心页面是怎么切换的，它只能要调用到一个接口方法能让页面切换就行了

基于这样的理论，我们就开始改造一下页面切换的零碎的代码块

页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口

JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟

具体我看看右边代码块Swipe.js的实现 与index.html中调用

页面之间的卷滚切换效果

页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？

一般来说要根据布局的结构来，大体有2种：

• 移动父容器，改变父容器的坐标

• 移动每一个子容器的坐标

显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话，那么我们会考虑第二种算法，可以做成动态加载，但是这种处理是超级麻烦，这里不讨论

改变坐标的处理可以分为2种：

• 传统的top,left坐标修改

• CSS3中的transform属性

传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。

CSS3引入了一个新的属性Transform

transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强

过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性

transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料

这里需要特别注意的就是：

transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程

简单的一句话描述就是

通过设置transition的一些参数，让translate3d这个属性发生变化

如何通过translate结合transition改变元素的页面位置，我们具体看到右边的代码

通过点击"点击页面开始切换"出现页面切换的效果

页面的横向布局

本章正式进入七夕这个主题效果是如何实现的讲解，首先回顾下视频的内容：整个效果都是以小男孩走路为前提，在三个主题页面中切换并在每个主题页面中会有不同的效果呈现

我们可以这样理解，效果上

• 页面主题会滚动

• 小男孩会走动

通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行

从页面的效果，考虑页面整体布局结构应该需要这样

• 页面是一个横向的

• 包含了3个主题页面

• 页面之间是无缝拼接的

• 页面还要能滚动

布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面

页面布局结构如下

<ul class='content-wrap'>     <!-- 第一副画面 -->     <li> 页面1 </li>     <!-- 第二副画面 -->     <li> 页面2 </li>     <!-- 第三副画面 -->     <li> 页面3 </li> </ul>

这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点

在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸

具体的实现我们参考右边的代码区域

h5+js+css

position与offset的取值不同点，.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移，一个元素可以嵌套多个position所以这里要特别注意下

解读一下样式的slowWalk类定义规则：

封装，即隐藏对象的属性和实现细节，仅对外公开接口。

目的：增强安全性和简化编程，没必要了解具体的实现细节，只是要通过外部接口，一特定的访问权限来使用类的成员。

transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程

通过设置transition的一些参数，让translate3d这个属性发生变化

小孩男走路是贯穿三个主题页面，因此小男孩在布局上不能嵌入任何一个页面内，否则无法切换到下一个页面中了。所以最终小男孩的布局与页面根节点属于并列结构

小男孩的布局很简单，但是要注意3个问题：

• 小男孩其实只会在当前页面移动，所以是相对父级#content的范围

• 小男孩的布局处理，因为小孩男是合成的"雪碧图"，通过坐标取图，因此不能用CSS处理自适应布局了，需要动态调整、

• 采用动画的元素需要设置绝对定位

观察效果会发现：小男孩总是会沿着中间那个路线走动。因为背景图是靠百分比控制的，会随着分辨率的变化而变化。但是人物是固定的尺寸是无法变化的（合成图的关系），这里只能通过JS动态调整

元素的布局上，我都是保留的原尺寸，如果需要自适应，单独可以用百分比控制，通过background-size 一般可以设置 100% 100%的方式平铺元素，这样设置后图片就能自适应大小缩放了

https://github.com/Mqleaf/Practice-in-IMOOC/tree/master/0%20qixi

css动画

animation和keyframes!!!!

transform