-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcopy.html
120 lines (116 loc) · 3.04 KB
/
copy.html
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360</title>
<link rel="stylesheet" href="./css/copy.css">
</head>
<body>
<div id="fullPage" class="fullpage">
<!-- 默认情况下要求每一屏的类名必须是class -->
<!-- 第一屏 -->
<div class="first section">
<!-- LOGO -->
<div class="logo"></div>
<!-- 文字 -->
<div class="texts">
<img src="./images/text_1.png" alt="">
<img src="./images/text_2.png" alt="">
<img src="./images/text_3.png" alt="">
<img src="./images/text_4.png" alt="">
<img src="./images/text_5.png" alt="">
<img src="./images/text_6.png" alt="">
<img src="./images/text_7.png" alt="">
<img src="./images/text_8.png" alt="">
</div>
<!-- 其它信息 -->
<div class="info"></div>
</div>
<!-- 第二屏 -->
<div class="second section">
<!-- 盾牌 -->
<div class="shield">
<img src="./images/shield_1.png" alt="">
<img src="./images/shield_2.png" alt="">
<img src="./images/shield_3.png" alt="">
<img src="./images/shield_4.png" alt="">
<img src="./images/shield_5.png" alt="">
<img src="./images/shield_6.png" alt="">
<img src="./images/shield_7.png" alt="">
<img src="./images/shield_8.png" alt="">
<img src="./images/shield_9.png" alt="">
</div>
<!-- 其它信息 -->
<div class="info"></div>
</div>
<!-- 第三屏 -->
<div class="third section">
<!-- 其它信息 -->
<div class="info"></div>
<!-- 圆 -->
<div class="circle"></div>
<!-- 火箭 -->
<div class="rocket">
<img src="./images/rocket.png" alt="">
</div>
</div>
<!-- 第四屏 -->
<div class="fourth section">
<!-- 搜索 -->
<div class="search">
<!-- 搜索框 -->
<div class="bar">
<!-- 关键字 -->
<div class="keys"></div>
</div>
<!-- 搜索结果 -->
<div class="result">
<div class="inner"></div>
</div>
</div>
<!-- 其它信息 -->
<div class="info"></div>
</div>
<!-- 第五屏 -->
<div class="fifth section">
<!-- 其它信息 -->
<div class="info"></div>
<!-- 浏览器 -->
<div class="broswer">
<!-- 四条线 -->
<div class="leftline"></div>
<div class="rightline"></div>
<div class="topline"></div>
<div class="bottomline"></div>
<!-- 工具栏 -->
<div class="toolbar">
<div class="border">
<!-- 嵌套一个盒子 -->
<div class="box"></div>
</div>
</div>
<!-- 底部的线 -->
<div class="line"></div>
<!-- 其它部分 -->
<div class="extra">
</div>
</div>
</div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fullPage.min.js"></script>
<script>
$('#fullPage').fullpage({
sectionsColor: ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
afterLoad: function (anchorLink, index) {
// 清除所有的current
$('.section').removeClass('current');
// 获得当前这一屏
setTimeout(function () {
$('.section').eq(index - 1).addClass('current');
}, 100);
}
});
</script>
</body>
</html>