-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (249 loc) · 11.4 KB
/
index.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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Demo </title>
</head>
<body>
<div id="iSlider-wrapper"></div>
<div class="musicControl" onclick="autoPlay()">
<a class="play" id="audioBtn" style="cursor:pointer"></a>
<audio id="bgMusic" loop="loop" autoplay="autoplay" src="./music/music.mp3"></audio>
</div>
<div style="display: none">
<div id="first">
<img class="first-title" src="image/page1/zi.png" alt="标题">
<img class="first-rcloud" src="image/page1/cloud1.png" alt="云朵-右">
<img class="first-lcloud" src="image/page1/cloud2.png" alt="云朵-左">
<img class="first-pig" src="image/page1/pig.png" alt="小猪">
</div>
<div id="second">
<img class="second_fcloud" src="image/云1.png" >
<img class="second_scloud" src="image/云2.png" >
<img class="second_tcloud" src="image/云3.png" >
<div class = "second_text1 display1">
<span class = "second_style1">从2019年</span>
<span class = "second_style2">3</span>
<span class = "second_style1">月</span>
<span class = "second_style2">1</span>
<span class = "second_style1">日</span>
</div>
<div class = "second_text2 display2">
<span class = "second_style1">——2019年</span>
<span class = "second_style2">3</span>
<span class = "second_style1">月</span>
<span class = "second_style2">1</span>
<span class = "second_style1">日</span>
</div>
<div class = "second_text3 display3" >
<span class = "second_style1">你总共刷过</span>
</div>
<div class = "second_text4 display4">
<span class = "second_style3">2563</span>
<span class = "second_style1">次校园卡</span>
</div>
<div class = "second_text5 display5">
<span class = "second_style1">共计消费</span>
<span class = "second_style3">26530</span>
<span class = "second_style1">元</span>
</div>
<div class="second_text6 display6">
<span class = "second_style4">相当于。。。</span>
</div>
<div class="second_text7 display7" >
<span class = "second_style5">可以买</span>
<span class = "second_style3">256</span>
<span class = "second_style5">支</span>
</div>
<div class="second_text8 display8">
<span class = "second_style5">YZL水光唇釉613</span>
</div>
<div class="second_pic1">
<img class="second_picture" src="image/唇釉.png">
</div>
</div>
<div id="third">
<img class="third-cloud1" src="image/page3/云1.png">
<div class="third-top third-font display1">在<span id="third-inner11">2019年10月10日</span></div>
<div class="third-middle third-font display2">你在<span id="third-inner2">学子食堂</span><br><br> 开始了你一天的消费</div>
<img class="third-cloud2" src="image/page3/云2.png">
<div class="third-word1 third-font display3">这是一年里</div>
<div class="third-word2 third-font display4">你刷卡<span>最早</span>的一天</div>
<div class="third-font third-word3 display5">时间在<span id="third-inner12">10：00</span></div>
<img id="third-con-img" src="image/page3/朝霞.png">
<div id="third-con-word" class="third-font">清晨的朝霞美丽吗？</div>
<img class="third-pig" src="image/common/方猪.png">
</div>
<div id="forth">
<img class="forth_fcloud" src="image/4cloud1.png" >
<img class="forth_scloud" src="image/4cloud2.png" >
<img class="forth_icon" src="image/page4.png" >
<div class = "forth_text1 display1">
<span class = "forth_style1">在2019年</span>
<span class = "forth_style2">3</span>
<span class = "forth_style1">月</span>
<span class = "forth_style2">1</span>
<span class = "forth_style1">日晚上</span>
</div>
<div class = "forth_text2 display2">
<span class = "forth_style3">你在</span>
<span class = "forth_style3">东一食堂</span>
</div>
<div class = "forth_text3 display3">
<span class = "forth_style3">结束了你一天的消费</span>
</div>
<div class = "forth_text4 center display4">
<span class = "forth_style4">这是你一年里刷卡</span>
<span class = "forth_style5">最晚</span>
<span class = "forth_style4">的一天</span>
</div>
<div class = "forth_text5 center display5">
<span class = "forth_style6">时间在</span>
<span class = "forth_style3">10:10</span>
</div>
<div class = "forth_text6 center display6">
<span class = "forth_style7">恭喜你度过了一个</span>
</div>
<div class = "forth_text7 center display7">
<span class = "forth_style7">没有宵夜的夜晚!</span>
</div>
</div>
<div id="fifth">
<img class="fifth_cloud1" src="image/最上云.png">
<img class="fifth_cloud2" src="image/中间云.png">
<img class="fifth_cloud3" src="image/最下云.png">
<img class="fifth_television" src="image/television.png">
<canvas id="canvas" style="position:absolute;top:56.24vh;left:10vw;">
您的浏览器不支持canvas弹幕。
</canvas>
<div class = "fifth_text1 center">
<span class = "fifth_style display1">2019年</span>
<span class = "fifth_style">10</span>
<span class = "fifth_style">月</span>
<span class = "fifth_style">10</span>
<span class = "fifth_style">日</span>
</div>
<div class = "fifth_text2 center display2">
<span class = "fifth_style">你一共刷了</span>
<span class = "fifth_style">10</span>
<span class = "fifth_style">次卡</span>
</div>
<div class = "fifth_text3 center display3">
<span class = "fifth_style">这是一年里</span>
</div>
<div class = "fifth_text4 center display4">
<span class = "fifth_style">你刷卡最多的一天</span>
</div>
</div>
<div id="six">
<img class="six-cloud3" src="image/page6/云3.png">
<img class="six-kite" src="image/page6/风筝.png">
<div class="six-w1 six-font1 display1">在2019年里</div>
<div class="six-w2 six-font2 display2" id="six-inner1">便利店</div>
<div class="six-w3 six-font1 display3">是你消费<span>最多</span>的地方</div>
<div class="six-w4 six-font1 display4">总共消费了<span id="six-inner2">1234</span>次</div>
<div class="six-w5 six-font1 display5">为它贡献了￥<span id="six-inner3">12345</span></div>
<img class="six-cloud1" src="image/page6/云1.png">
<img id="six-condition" src="image/page6/超市便利店.png">
<img class="six-cloud2" src="image/page6/云2.png">
</div>
<div id="seven">
<img class="seven-title" src="image/page7/tag.png">
<div class="seven-tbox">
<div class="seven-tb1">最壕消费金额:￥<span id="seven-inner5">999999</span></div>
<div class="seven-tb2">年度最受欢迎食堂:</div>
<div class="seven-tb3" id="seven-inner6">东一食堂</div>
</div>
<div class="seven-mbox">
<div class="seven-mb1">最早de消费：</div>
<div class="seven-mb2"><span id="seven-inner1">10月10日</span> <span id="seven-inner2">东一食堂</span> <span id="seven-inner21">xx窗口</span></div>
</div>
<div class="seven-bbox">
<div class="seven-bb1">最晚de消费:</div>
<div class="seven-bb1"><span id="seven-inner3">10月10日</span> <span id="seven-inner4">东一食堂</span> <span id="seven-inner41">xx窗口</span></div>
</div>
<img class="seven-tdragon seven-dra" src="image/page7/龙左.png">
<img class="seven-mdragon seven-dra" src="image/page7/龙右.png">
<img class="seven-bdragon seven-dra" src="image/page7/龙左.png">
</div>
<div id="eight">
<img class="eight-lcloud" src="image/page8/左云.png">
<img class="eight-rcloud" src="image/page8/右云.png">
<div class="eight-font1 eight-cfont">你的2019故事</div>
<div class="eight-font2 eight-cfont">到此结束</div>
<div class="eight-font3 eight-cfont">But</div>
<div class="eight-font4 eight-cfont">你的2020故事</div>
<div class="eight-font5 eight-cfont">即将开始!</div>
<img class="eight-box" src="image/page8/框.png">
</div>
</div>
<script src="js/iSlider.js"></script>
<script src="js/iSlider.min.js"></script>
<script src="js/style.js"></script>
<script src="js/barrage.js"></script>
<script src="js/animation-control.js"></script>
<script type="text/javascript">
function autoPlay() {
var music = document.getElementById("vd");
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
}
</script>
<script id="show-code">
var list = [
{
content: document.querySelector('#first')
},
{
content: document.querySelector('#second')
},
{
content: document.querySelector('#third')
},
{
content: document.querySelector('#forth')
},
{
content: document.querySelector('#fifth')
},
{
content: document.querySelector('#six')
},
{
content: document.querySelector('#seven')
},
{
content: document.querySelector('#eight')
}
]
var S = new iSlider({dom: document.getElementById('iSlider-wrapper'),
data: list,
isVertical: true
});
</script>
<script type="text/javascript">
function autoPlay() {
var audio = document.getElementById("bgMusic");
var button = document.getElementById("audioBtn");
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
if( hasClass(button,'play')){
audio.pause();
button.classList.replace("play","pause");
return;
}
if(hasClass(button,'pause')){
audio.play();
button.classList.replace("pause","play");
return;
}
}
</script>
<script src="/js/request.js"></script>
</body>
</html>