-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
237 lines (221 loc) · 11.9 KB
/
Copy pathindex.html
File metadata and controls
237 lines (221 loc) · 11.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<!--<link href="https://cdn.bootcss.com/Swiper/3.2.5/css/swiper.css" rel="stylesheet">-->
<link rel="stylesheet" href="css/swiper.mins.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/test5.css" />
<link rel="stylesheet" href="js/site.min.css" />
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/jquery.rotate.min.js" ></script>
<script type="text/javascript" src="js/test5.js" ></script>
<title>Document</title>
</head>
<body>
<div class="pages">
<div class="musicPlay music-play rotate" play="closed">
<img src="img/yy.png" id="yyZhy">
</div>
<audio src="mp3/Luv%20Letter.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>
</div>
<script>
$(function(){
$(document).on('click','.musicPlay',function(){
if($(this).attr('play')== 'opend'){
$(this).addClass('rotate');
$(this).attr('play','closed');
document.querySelector('#Jaudio').play();
}else{
$(this).removeClass('rotate');
$(this).attr('play','opend');
document.querySelector('#Jaudio').pause();
}
})
});
</script>
<script>
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('Jaudio');
</script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide ss1">
<p>Le Pass</p>
<img src="img/1 (2).jpg" id="zhy"/>
<div class="demo-list">
<div class="cc rowup">
<div class="item">Whatever is worth doing is worth doing well.</div>
<div class="item">Happiness is a way station between too much and too little.</div>
<div class="item">In love folly is always sweet.</div>
<div class="item">The hard part isn’t making the decision. It’s living with it.</div>
<div class="item">Your happy passer-by all knows, my distressed there is no place hides.</div>
<div class="item">You may be out of my sight, but never out of my mind.</div>
<div class="item">Love is not a maybe thing. You know when you love someone.</div>
<div class="item">Whatever is worth doing is worth doing well.</div>
<div class="item">Happiness is a way station between too much and too little.</div>
<div class="item">In love folly is always sweet.</div>
<div class="item">The hard part isn’t making the decision. It’s living with it.</div>
<div class="item">Your happy passer-by all knows, my distressed there is no place hides.</div>
<div class="item">You may be out of my sight, but never out of my mind.</div>
<div class="item">Love is not a maybe thing. You know when you love someone.</div>
<div class="item">Whatever is worth doing is worth doing well.</div>
<div class="item">Happiness is a way station between too much and too little.</div>
<div class="item">In love folly is always sweet.</div>
<div class="item">The hard part isn’t making the decision. It’s living with it.</div>
<div class="item">Your happy passer-by all knows, my distressed there is no place hides.</div>
<div class="item">You may be out of my sight, but never out of my mind.</div>
<div class="item">Love is not a maybe thing. You know when you love someone.</div>
</div>
</div>
</div>
<div class="swiper-slide ss2">
<div class="ani t_c mt140" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<img class="pic1" src="img/huihua1.png" />
<p>look see you</p>
</div>
<div class="ani t_c mt141" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.7s" swiper-animate-delay="0.5s">
<img src="img/huihua1.png" />
<p>dengl le pass</p>
</div>
<div class="ani t_c mt142" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img src="img/huihua3.png" />
</div>
<div class="wenb">
<p class="ani t_c mt143" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.2s" swiper-animate-delay="1s">xianyu</p>
<p class="ani t_c mt144" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.4s" swiper-animate-delay="1.2s">xianyu</p>
<p class="ani t_c mt145" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.6s" swiper-animate-delay="1.4s">xianyu</p>
<p class="ani t_c mt146" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.8s" swiper-animate-delay="1.6s">xianyu</p>
</div>
<div id = "test"></div>
</div>
<div class="swiper-slide ss3">
<p class="ani t_c mt147" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">xiangyu</p>
<div class="ani t_c mt148" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img src="img/huihua4.png" />
<p>I never thought that I would actually graduate after graduation</p>
</div>
<div class="ani t_c mt149" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s">
<img src="img/4.png" />
</div>
</div>
<div class="swiper-slide ss4">
<p class="ani t_c mtp153" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">xiangshi</p>
<div class="ani t_c mt150" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
<img src="img/1 (1).jpg" />
</div>
<div class="ani t_c mt151" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.5s">
<img src="img/1 (2).jpg" />
</div>
<p class="ani t_c mt152" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.2s">
I found that I seem to know nothing about you, when I want to do something for this memory, but nothing.
</p>
</div>
<div class="swiper-slide ss5">
<p class="ani t_c mtp153" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">xiangzhi</p>
<div class="ani t_c mt153" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img class="pic2" src="img/main.jpg" />
<div class="sole">
<h4>The only photo</h4>
<span>It's a pity that the only photo of a person I used to like so much is a graduation photo.You have everything I like</span>
</div>
</div>
<div class="ani t_c mt154" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
<img src="img/1 (2).jpg" />
</div>
</div>
<div class="swiper-slide ss6">
<div id="clipped-title1" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">
<h1>THE LION</h1>
</div>
<div id="clipped-title2" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s">
<h1>King of the Jungle</h1>
</div>
<p class="ani t_c mtp153" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">845451258 451215</p>
</div>
<div class="swiper-slide ss7">
<img src="img/ncsu.jpg" class="ani pp mtp170" swiper-animate-effect="fadeOut" swiper-animate-duration="0.4s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp171" swiper-animate-effect="fadeOut" swiper-animate-duration="0.6s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp172" swiper-animate-effect="fadeOut" swiper-animate-duration="0.6s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp173" swiper-animate-effect="fadeOut" swiper-animate-duration="0.8" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp174" swiper-animate-effect="fadeOut" swiper-animate-duration="0.8" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp175" swiper-animate-effect="fadeOut" swiper-animate-duration="1" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp176" swiper-animate-effect="fadeOut" swiper-animate-duration="1s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp177" swiper-animate-effect="fadeOut" swiper-animate-duration="1.2s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp178" swiper-animate-effect="fadeOut" swiper-animate-duration="1.2s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp179" swiper-animate-effect="fadeOut" swiper-animate-duration="1.4s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp180" swiper-animate-effect="fadeOut" swiper-animate-duration="1.4s" swiper-animate-delay="1s"/>
<img src="img/ncsu.jpg" class="ani pp mtp181" swiper-animate-effect="fadeOut" swiper-animate-duration="1.6s" swiper-animate-delay="1s"/>
<img src="img/main.jpg" class="ani ppMain mtp182" swiper-animate-effect="rotateOut" swiper-animate-duration="2s" swiper-animate-delay="2s"/>
<p class="ani mtp183" swiper-animate-effect="fadeInUp" swiper-animate-duration="3s" swiper-animate-delay="3s">狗子的猜想?</p>
</div>
<div class="swiper-slide ss8">
<!-- COIDEA:header START -->
<header class="coidea-header">
</header>
<!-- COIDEA:header END -->
<!-- COIDEA:demo START -->
<section id="ci-particles">
<canvas id="canvas"></canvas>
<h1 id="headline">唯一</h1>
</section>
<!-- COIDEA:demo END -->
</div>
</div>
</div>
<script type="text/javascript" src="js/swipers.js" ></script>
<script type="text/javascript" src="js/swiper.animate1.0.3.min.js" ></script>
<script type="text/javascript" src="js/shape-shifter.js" ></script>
<script type="text/javascript" src="js/demo.js" ></script>
<script>
var angle = 0;
setInterval(function () {
angle += 5;
$('#zhy').rotate(angle);
}, 150);
rotation2();
</script>
<script>
// swiper初始化
var mySwiper = new Swiper('.swiper-container', {
direction : 'vertical', //垂直方向
speed:500, //切换速度
loop:false, //循环模式
/*
*animate的初始化
* */
onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper) {
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
});
</script>
</body>
</html>