-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
192 lines (186 loc) · 8.49 KB
/
example.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">精彩即将呈现...</title>
<link rel="stylesheet" href="examp.css">
<base target="_self">
<link rel="shortcut icon" href="https://s3.bmp.ovh/imgs/2023/11/14/0dd35da309410587.png" type="image/png">
</head>
<body>
<div id="cover">
<p>精彩即将呈现...</p>
</div>
<script src="jq.min.js"></script>
<audio src="https://gitee.com/tzydh/tzydh/raw/main/schoolsong.m4a" id="ssaudio" preload="none"></audio>
<!-- <audio src="https://downsc.chinaz.net/Files/DownLoad/sound1/201605/7324.mp3" -->
<!-- id="audio" preload="none"></audio> -->
<audio src="https://gitee.com/tzydh/tzydh/raw/main/music.m4a" id="audio" preload="none"></audio>
<div id="tit">
<div class="title">
<p id="topic">Loading...</p>
<a class="a btn" onclick="$('#sidebar').toggleClass('show');"><svg xmlns="http://www.w3.org/2000/svg"
width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
</svg></a>
</div>
<!-- <p>若某些图片加载失败，请右键图片点击加载映像以重新加载</p> -->
<div id="musctrl">
<p id="topBarTitle">🎵运动员进行曲</p>
<a onclick="if($(this).hasClass('play')){
if(playss){
document.getElementById('ssaudio').play();
}else{
document.getElementById('audio').play();
}
played=true;
$('#musctrl>.btn').text('暂停');
$('#musctrl>.btn').removeClass('play');
$('#music>.tip').text('我们已开始播放音乐');
$('#music>.btn').remove();
}else{
if(playss){
document.getElementById('ssaudio').pause();
}else{
document.getElementById('audio').pause();
}
this.innerText='播放';
$(this).addClass('play');
}" class="play a btn" style="margin: 0 15px;">播放</a>
</div>
</div>
<div id="sidebar">
<div class="grid">
<a class="card enable" href="example.html?id=opencrmn" style="grid-column: 2 span;">
<p>开幕式</p>
</a>
<a class="card enable" href="example.html?id=volunteer">
<p>志愿服务</p>
</a>
<a class="card enable" style="grid-column: 2 span;" href="example.html?id=closecrmn">
<p>闭幕式</p>
</a>
<a class="card enable" href="example.html?id=4x100">
<p>4×100m</p>
</a>
<a class="card enable" href="example.html?id=100">
<p>100m</p>
</a>
<a class="card enable" href="example.html?id=200">
<p>200m</p>
</a>
<a class="card enable" href="example.html?id=400">
<p>400m</p>
</a>
<a class="card enable" href="example.html?id=800">
<p>800m</p>
</a>
<a class="card enable" href="example.html?id=1500">
<p>1500m</p>
</a>
<a class="card enable" href="example.html?id=3000">
<p>3000m</p>
</a>
<a class="card enable" href="example.html?id=shotput">
<p>铅球</p>
</a>
<a class="card enable" href="example.html?id=highjump">
<p>跳高</p>
</a>
<a class="card enable" style="grid-column: 2 span;" href="example.html?id=longjump">
<p>跳远&三级跳远</p>
</a>
<a class="card enable" href="example.html?id=schoolscene">
<p>学校风景</p>
</a>
<a class="card enable" href="example.html?id=relay">
<p>迎面接力</p>
</a>
</div>
</div>
<a class="a" id="totop" onclick="$('html')[0].scroll(0,0)">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-bar-up" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M3.646 11.854a.5.5 0 0 0 .708 0L8 8.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708zM2.4 5.2c0 .22.18.4.4.4h10.4a.4.4 0 0 0 0-.8H2.8a.4.4 0 0 0-.4.4z" />
</svg>
</a>
<script>
var playss=false;
var r = window.location.search.substr(1).match(/(^|&)id=([^&]*)(&|$)/);
if (r != null) r = unescape(r[2])
else {
alert('一点小问题，不必介意，还请刷新试试');
}
$.getJSON(`pics/${r}.json`).then(res => {
//获取参数
if(res.title=="学校风景"){
//如果打开的是学校风景
playss=true;
$('#topBarTitle').text("🎵一路阳光（校歌）")
}
$('#topic').text(res.title);
$('#title').text('天中运动会-' + res.title); //更改标题
if(res.intro){
//插入介绍
$('#content')[0].innerHTML += `<div class="text">
<p class="tit">${res.intro.tit}</p>
<p>${res.intro.cnt}</p>
</div>`;
}
//插入每个图片
res.pics.forEach(p => {
$('#content')[0].innerHTML += `<div class="pic af">
<p>加载中...</p>
<a href="${p.url}" class="link"><img src="${p.url}" class="pic" loading="lazy"></img></a>
<p class="desp">${p.dtl}</p>
</div>`;
});
$('#cover,html').addClass('load');
start();
}).fail(() => {
alert('一些小问题，不必介意，还请刷新试试');
});
</script>
<p id="tip" class="show">点击图片可单独浏览；点击左上三横按钮可切换体育项目。</p>
<div id="content">
<div id="music">
<p class="ti">奏乐~</p>
<p class="tip">下滑即意味着我们将趁浏览器不备时播放</p>
<!-- “默认播放”按钮 -->
<a onclick="
//如果打开的是学校风景，就播放校歌
if(playss){
document.getElementById('ssaudio').play()
}else{
document.getElementById('audio').play();
}
//改变状态为已经播放
played=true;
$('#musctrl>.btn').text('暂停');
$('#musctrl>.btn').removeClass('play');
$('#music>.tip').text('我们已开始播放音乐');
$('#music>.btn').remove();
localStorage.setItem('playm','true');" class="play a btn">默认播放</a>
<a class="a btn noplay" onclick="
if(playss){
document.getElementById('ssaudio').pause()
}else{
document.getElementById('audio').pause();
}
playm=false;
$('#music>.btn').remove();
$('#music>.tip').text('我们不会播放音乐');
localStorage.setItem('playm','false');">从不播放</a>
</div>
</div>
<div id="footer">
网站制作：<a class="a jump" target="_blank" href="https://tjy-gitnub.github.io/">星源</a><br>
项目策划、后期完善：<a class="a jump" target="_blank" href="https://tjy-gitnub.github.io/">星源</a>、<a class="a jump" target="_blank" href="https://programcx.github.io/">Program</a><br>
联系邮箱：<a class="a jump" target="_blank" href="mailto:pinsoftstudio@outlook.com">PinsoftStudio@outlook.com</a><br>
在此我们向为制作该次运动会相册网站提供照片的教师和学生表示感谢！
</div>
<script src="examp.js"></script>
</body>
</html>