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

页面的横向布局

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

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

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

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

布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面

页面布局结构如下

<ul class='content-wrap'>
    <!-- 第一副画面 -->
    <li> 页面1 </li>
    <!-- 第二副画面 -->
    <li> 页面2 </li>
    <!-- 第三副画面 -->
    <li> 页面3 </li>
</ul>

这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点

在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸

具体的实现我们参考右边的代码区域

<!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>

页面的横向布局