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

页面的横向布局

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

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

  • 页面主题会滚动
  • 小男孩会走动

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

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

  • 页面是一个横向的
  • 包含了3个主题页面
  • 页面之间是无缝拼接的
  • 页面还要能滚动

布局上很好处理,我们做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'
});
?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?