Skip to content

Commit 21ecdd2

Browse files
coderpwh1024coderpwh1024
authored
Add files via upload
update JavaScript code
1 parent 18a6f53 commit 21ecdd2

File tree

8 files changed

+129
-0
lines changed

8 files changed

+129
-0
lines changed

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/images/door1.png

112 KB
Loading

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/images/door2.png

83.4 KB
Loading

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/images/door3.png

102 KB
Loading

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/images/door4.png

113 KB
Loading

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Dom基础</title>
6+
<link rel="stylesheet" href="styles/reset.css"/>
7+
<link rel="stylesheet" href="styles/slidingdoors.css"/>
8+
<script src="scripts/slidingdoors.js"></script>
9+
</head>
10+
11+
<div id="container">
12+
<img src="images/door1.png" alt=1080P神器" title="1080神器0"/>
13+
<img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核"/>
14+
<img src="images/door3.png" alt="四核5寸" title="四核5寸"/>
15+
<img src="images/door4.png" alt="5.7寸机皇" title="5.7寸机皇"/>
16+
</div>
17+
18+
19+
<body>
20+
21+
</body>
22+
</html>

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/scripts/slidingdoors.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* Created by coderpwh on 2018/3/1.
3+
*/
4+
window.onload = function () {
5+
// 容器对象
6+
var box = document.getElementById('container');
7+
// 获得图片NodeList对象集合
8+
var imgs = box.getElementsByTagName('img');
9+
//单张图片的宽度
10+
var imgWidth = imgs[0].offsetWidth;
11+
// 设置掩藏门体漏出的宽度
12+
var exposeWidth = 160;
13+
// 设置容器的总宽度
14+
var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;
15+
box.style.width = boxWidth + 'px';
16+
17+
// 设置每道门的初始位置
18+
function setImgsPos() {
19+
for (var i = 1, len = imgs.length; i < len; i++) {
20+
imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';
21+
}
22+
}
23+
24+
setImgsPos();
25+
// 计算每道门打开时应移动的距离
26+
var translate = imgWidth - exposeWidth;
27+
// 为每道门绑定事件
28+
for (var i = 0, len = imgs.length; i < len; i++) {
29+
// 使用立即调用的函数表答式,为了获取不同的i值
30+
(function (i) {
31+
imgs[i].onmouseover = function () {
32+
// 先将每道门复位
33+
setImgsPos();
34+
// 打开门
35+
for(var j=1;j<=i;j++){
36+
imgs[j].style.left = parseInt(imgs[j].style.left,10)-translate+'px';
37+
}
38+
}
39+
})(i);
40+
}
41+
42+
43+
}
44+
45+

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/styles/reset.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
3+
* http://cssreset.com
4+
*/
5+
html, body, div, span, applet, object, iframe,
6+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
7+
a, abbr, acronym, address, big, cite, code,
8+
del, dfn, em, img, ins, kbd, q, s, samp,
9+
small, strike, strong, sub, sup, tt, var,
10+
b, u, i, center,
11+
dl, dt, dd, ol, ul, li,
12+
fieldset, form, label, legend,
13+
table, caption, tbody, tfoot, thead, tr, th, td,
14+
article, aside, canvas, details, embed,
15+
figure, figcaption, footer, header, hgroup,
16+
menu, nav, output, ruby, section, summary,
17+
time, mark, audio, video {
18+
margin: 0;
19+
padding: 0;
20+
border: 0;
21+
font-size: 100%;
22+
font: inherit;
23+
vertical-align: baseline;
24+
}
25+
/* HTML5 display-role reset for older browsers */
26+
article, aside, details, figcaption, figure,
27+
footer, header, hgroup, menu, nav, section {
28+
display: block;
29+
}
30+
body {
31+
line-height: 1;
32+
}
33+
ol, ul {
34+
list-style: none;
35+
}
36+
blockquote, q {
37+
quotes: none;
38+
}
39+
blockquote:before, blockquote:after,
40+
q:before, q:after {
41+
content: '';
42+
content: none;
43+
}
44+
table {
45+
border-collapse: collapse;
46+
border-spacing: 0;
47+
}

‎JavaScript/慕课网/Dom/Dom基础/JS+Dom实例/styles/slidingdoors.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#container {
2+
height: 477px;
3+
margin: 0 auto;
4+
border-right: 1px solid #ccc;
5+
border-bottom: 1px solid #ccc;
6+
overflow: hidden;
7+
position: relative;
8+
}
9+
10+
#container img {
11+
position: absolute;
12+
display: block;
13+
left: 0;
14+
border-left: 1px solid #ccc;
15+
}

0 commit comments

Comments
 (0)