七夕项目js实现-2-1

2-1页面的横向布局

前言

​ 对imooc上一个关于html5+css3 的课程《七夕言情》进行纯原生js改版,没有别的额外意思,只是想在实现这一课程时,使用别的实现方式会加深印象。我会在一些点上增加些代码解析,有助于新手理解。
​ 对于没学过jquery的童鞋来说,可能值得一探究竟的。
​ 有视频的课大家直接看视频,我直接对着没视频的课代码撸起!
​ 请注意章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

​ 对 ”2-1 页面的横向布局“ js实现如下:
​ 原教程代码中:
<script src="http://img.mukewang.com/down/55ac9a860001a6c500000000.js"></script>
​ 这是个jquery V2.1.4文件,我们既然改为js实现了,这个引用就没用了,包括后面的课程凡是jquery都可以删掉。

js代码实现部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
// 获取第一个子节点
var container = document.getElementById('content');
// 获取ul
var element = container.getElementsByClassName('content-wrap');
// 获取li
var slides = element[0].getElementsByTagName("li");
// 获取容器尺寸 offset属性,获取自身的宽高
var width = container.offsetWidth;
var height = container.offsetHeight;
// 设置ul总宽度
element[0].style.width = (width * slides.length) + 'px';
element[0].style.height = height + 'px';
// 设置每一个页面li的宽度
for (var i = 0; i < slides.length; i++) {
slides[i].style.width = width + 'px';
slides[i].style.height = height + 'px';
}
</script>

结束语

​ 2-1课程代码比较简单,相信即使新手,照着w3c上教程也能轻松完成。

代码我已上传百度云盘,欢迎大家下载查看。。。
链接:http://pan.baidu.com/s/1nvt9Qsh 密码:pexw
如有疑问请在下方留言。。。

:只对script内的内容作了修改。html,css与原文一致。

本节全部代码送上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>慕课七夕主题</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

ul,
li {
list-style-type: none;
}
/*主体部分*/

#content {
width: 60%;
height: 60%;
top: 20%;
left: 20%;
overflow: hidden;
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 = document.getElementById('content');
// 获取ul
var element = container.getElementsByClassName('content-wrap');
// 获取li
var slides = element[0].getElementsByTagName("li");
// 获取容器尺寸 offset属性,获取自身的宽高
var width = container.offsetWidth;
var height = container.offsetHeight;
// 设置ul总宽度
element[0].style.width = (width * slides.length) + 'px';
element[0].style.height = height + 'px';
// 设置每一个页面li的宽度
for (var i = 0; i < slides.length; i++) {
slides[i].style.width = width + 'px';
slides[i].style.height = height + 'px';
}
</script>
</body>
</html>