页面的横向布局，H5+JS+CSS3实现七夕言情教程-慕课网

页面的横向布局

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

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

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

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

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

页面是一个横向的
包含了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'
});

?不会了怎么办

||

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <script src="http://img1.sycdn.imooc.com//down/55ac9a860001a6c500000000.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } ul, li { list-style-type: none; } /*主体部分*/ #content { width : 60%; height : 60%; top : 20%; left : 20%; overflow : ?; position : absolute; border : 1px solid #ccc; } .content-wrap { position: relative; } .content-wrap > li { width: 100%; height: 100%; background: #CAE1FF; color: red; float: left; overflow: hidden; position: relative; } li:nth-child(2) { background: #9BCD9B; } li:nth-child(3) { background: yellow; } </style> </head> <body> <div id='content'> <ul class='content-wrap'>  <li> 页面1 </li>  <li> 页面2 </li>  <li> 页面3 </li> </ul> </div> <script type="text/javascript"> var container = $("#content"); // 获取第一个子节点 var element = container.find(":first"); // li页面数量 var slides = element.find("li"); // 获取容器尺寸 var width = container.width(); var height = container.height(); // 设置li页面总宽度 element.css({ width : (slides.length * width) + 'px', height : height + 'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide = slides.eq(index); //获取到每一个li元素 // ？ }); </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

2-1 页面的横向布局