unsaids.github.io/copy.html at master · unsaid/unsaids.github.io · GitHub

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
121
<!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">
		<!-- 第一屏 -->
		<div class="section first">
			<!-- LOGO -->
			<div class="logo"></div>
			<!-- 文字 -->
			<div class="text">
				<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="extra"></div>
		</div>
		<!-- 第二屏 -->
		<div class="section second">
			<!-- 盾牌 -->
			<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="extra"></div>
		</div>
		<!-- 第三屏 -->
		<div class="section third">
			<!-- 其它信息 -->
			<div class="extra"></div>
			<!-- 圆 -->
			<div class="circle"></div>
			<!-- 火箭 -->
			<div class="rocket"></div>
		</div>
		<!-- 第四屏 -->
		<div class="section fourth">
			<!-- 搜索 -->
			<div class="search">
				<!-- 搜索框 -->
				<div class="bar"></div>
				<!-- 关建字 -->
				<div class="keys"></div>
				<!-- 结果 -->
				<div class="result">
					<img src="./images/result.png" alt="">
				</div>
			</div>
			<!-- 其它信息 -->
			<div class="extra"></div>
		</div>
		<!-- 第五屏 -->
		<div class="section fifth">
			<!-- 其它 -->
			<div class="extra"></div>
			<div class="browser">
				<!-- 四边框 -->
				<div class="line lineleft"></div>
				<div class="line linetop"></div>
				<div class="line lineright"></div>
				<div class="line linebottom"></div>
				<!-- 工具栏 -->
				<div class="toolbar"></div>
				<div class="border-box">
					<div class="border"></div>
				</div>
				<!-- 任务栏 -->
				<div class="line5"></div>
				<div class="taskbar"></div>
			</div>
		</div>
	</div>

	<script src="./js/jquery.min.js"></script>
	<script src="./js/jquery.fullPage.min.js"></script>
	<script>
		// 全屏插件对HTML结构有一定要求
		// 应用插件后会对原来DOM结构进行修改
		// 修改的目的是为了功能的实现方便
		$('#fullpage').fullpage({
			sectionsColor : ['#0DA5D6', '#2AB561','#DE8910', '#16BA9D', '#0DA5D6'],
			// 当滚动一屏后会触发
			afterLoad: function (anchorLink, index) {
				console.log(index, anchorLink);

				// 清空所有区块的特殊类名
				$('.section').removeClass('current');

				// 为每一屏添加特殊的类名
				// 此类名用定义过渡样式

				// 设置延时为了给浏览器反应时间
				setTimeout(function () {
					//
					$('.section').eq(index - 1).addClass('current');
				}, 50);
			}
		});

	</script>
</body>
</html>