小孩男走路是贯穿三个主题页面，因此小男孩在布局上不能嵌入任何一个页面内，否则无法切换到下一个页面中了。所以最终小男孩的布局与页面根节点属于并列结构
页面的整体结构如下：
<div id='content'>
<ul class='content-wrap'>
<li> 页面1 </li>
<li> 页面2 </li>
<li> 页面3 </li>
</ul>
//与页面根节点并列
<div id="boy" class="charector"></div>
</div>
小男孩的布局很简单，但是要注意3个问题：
观察效果会发现：小男孩总是会沿着中间那个路线走动。因为背景图是靠百分比控制的，会随着分辨率的变化而变化。但是人物是固定的尺寸是无法变化的（合成图的关系），这里只能通过JS动态调整
人物坐标的算法也比较简单：
小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度
具体可以参考右边代码区域的实现，增加了pageA文件设置第一个页面的背景布局，因为人物的布局需要以背景布局为参考点
这里我特别提出一个问题：
雪碧图一般情况下是无法自适应缩放的，本课程为了简单处理使用"雪碧图"的元素都是原尺寸，没有缩放。 大家可以思考下，雪碧图如何做是自适应处理？ 具体我在9-2最后一节给我给了具体是缩放方案，做为一个课后的思考点。
打开index.html文件，在代码的63行填入相应代码，这样可以通过JS动态修正小孩男的top布局坐标了
$boy.css({
top: pathY - boyHeight + 25
});
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
