章节
问答
课签
笔记
评论
占位
占位

布局的自适应动态调整

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

页面的整体结构如下:

<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个问题:

  • 小男孩其实只会在当前页面移动,所以是相对父级#content的范围
  • 小男孩的布局处理,因为小孩男是合成的"雪碧图",通过坐标取图,因此不能用CSS处理自适应布局了,需要动态调整、
  • 采用动画的元素需要设置绝对定位

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

人物坐标的算法也比较简单:

小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度

具体可以参考右边代码区域的实现,增加了pageA文件设置第一个页面的背景布局,因为人物的布局需要以背景布局为参考点

这里我特别提出一个问题:

雪碧图一般情况下是无法自适应缩放的,本课程为了简单处理使用"雪碧图"的元素都是原尺寸,没有缩放。 大家可以思考下,雪碧图如何做是自适应处理? 具体我在9-2最后一节给我给了具体是缩放方案,做为一个课后的思考点。

任务

打开index.html文件,在代码的63行填入相应代码,这样可以通过JS动态修正小孩男的top布局坐标了

$boy.css({
    top: pathY - boyHeight + 25
 });
?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?