本章正式进入七夕这个主题效果是如何实现的讲解，首先回顾下视频的内容：整个效果都是以小男孩走路为前提，在三个主题页面中切换并在每个主题页面中会有不同的效果呈现
我们可以这样理解，效果上
通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行
从页面的效果，考虑页面整体布局结构应该需要这样
布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面
页面布局结构如下
<ul class='content-wrap'>
<!-- 第一副画面 -->
<li> 页面1 </li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点
在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸
具体的实现我们参考右边的代码区域
打开index.html文件，在代码的24行填入相应代码，通过溢出隐藏多余的页面
hidden
在80行填入相应代码，通过JS动态设置每一个元素的尺寸
slide.css({
width : width + 'px',
height : height + 'px'
});
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
