-
Notifications
You must be signed in to change notification settings - Fork 3
/
photo.html
249 lines (235 loc) · 11.6 KB
/
photo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>四海八荒的上神上仙们，你有一封快递已准时护送到，请卿亲启~</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<link rel="stylesheet" href="css/pageanimate.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="loadingcss"></div>
<div id="globalshow">
<div class="content_wrap bg_color" id="content_wrap" data-flag="false">
<div class="addclickTip dotanimate">
可点击
</div>
<div class="fengmian commondw" data-flag="fm">
<div class="commondw border bkanimate" data-flag="fm"></div>
<div class="commondw rows rowanimate" data-flag="fm"></div>
<div class="commondw tansuobtn tjanimate" data-flag="fm"></div>
</div>
<div class="commondw lastpage">
<div class="fonttips" id="fonttips"></div>
<!-- <div class="toptips">庆典期待您的到来</div> -->
<div class="datatime_wrap">
<div class="datatime">日期：08月05号</div>
<div class="datatime">时间：14：00</div>
<div class="datatime">地址：上海别墅轰趴</div>
</div>
<div class="arrow-box">
<img src="images/sanjiao.png" id="array">
</div>
<div class="commondw rows rowanimate"></div>
</div>
<div class="commondw page-hook" data-page="0"></div>
</div>
<audio id="touchmyheart" preload="auto" hidden="true" src="media/touch_my_heart.mp3" type="audio/mpeg"></audio>
<audio id="photoluyin" hidden="true" preload="auto" src="media/photo.mp3" type="audio/mpeg"></audio>
</div>
<script type="text/javascript" src="js/typed.min.js"></script>
<script type="text/javascript">
var upbum = 1,
num = 13;
function countNum() {
if (upbum < num) {
$("#content_wrap").append('<div class="commondw page-hook rtedanimate" data-page="' + upbum + '"></div>');
setTimeout("countNum()", 2000);
upbum++;
}
}
var scrollAnimateObj = {
num: 6,
init: function () {
var _this = this;
//点击触发加载
$("#content_wrap").on("click", ".fengmian", function () {
$(this).hide();
$("#touchmyheart")[0].play();
new Image().src = 'images/photo/page1.png';
new Image().src = 'images/photo/page2.png';
new Image().src = 'images/photo/page3.png';
new Image().src = 'images/photo/page4.png';
new Image().src = 'images/photo/page5.png';
new Image().src = 'images/photo/page6.png';
});
_this.slideDirect();
},
slideDirect: function () {
var _this = this;
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
}
;
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function (e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function (e) {
var nowElement = e.target;
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
_this.stop();
break;
case 1:
console.log("向上！")
_this.swipUp();
break;
case 2:
console.log("向下！")
_this.swipDown();
break;
case 3:
_this.slideLeft();
break;
case 4:
_this.slideRight(nowElement);
break;
default:
}
}, false);
},
slideRight: function (el) {
var _this = this;
console.log(el);
if ($(el).data("flag")) {
console.log("封面禁止滑动");
return
}
if ($("#content_wrap").children().length < 16) {
console.log("未加载完毕,不能右滑")
} else {
$("#touchmyheart")[0].play();
$("#photoluyin")[0].pause();
$(".addclickTip").show();
$("#content_wrap .page-hook").removeClass("reverse");
$("#content_wrap .page-hook").removeClass("animatestop");
$("#content_wrap .lastpage").hide();
$("#content_wrap .datatime_wrap").removeClass("lfontanimate");
}
if ($(el).hasClass("rtedanimate") || $(el).hasClass("rtedanimate1") || $(el).hasClass("content_wrap") || $(el).hasClass("lastpage") || $(el).hasClass("rows")) {
return
} else {
$(el).addClass("rtedanimate1");
$(el).parents("#content_wrap").find(".page-hook").each(function () {
if (!$(this).hasClass("rtedanimate1")) {
$(this).addClass("rtedanimate")
}
});
countNum();
setTimeout(function () {
$("#content_wrap").children(".page-hook").eq(0).hide();
$(".addclickTip").show();
$("#content_wrap").data("flag", true);
}, 27000)
}
},
slideLeft: function () {
if ($("#content_wrap").children().length < 16) {
console.log("未加载完毕,不能左滑")
} else {
//反向动画
if ($("#content_wrap").data("flag")) {
$("#touchmyheart")[0].play();
$("#photoluyin")[0].pause();
$(".addclickTip").show();
$("#content_wrap .page-hook").addClass("reverse");
$("#content_wrap .page-hook").removeClass("animatestop");
$("#content_wrap .lastpage").hide();
$("#content_wrap .datatime_wrap").removeClass("lfontanimate");
}
}
},
stop: function () {
if ($("#content_wrap").children().length < 16) {
console.log("未加载完毕,点击无效")
} else {
//停止动画
if ($("#content_wrap").data("flag")) {
$("#touchmyheart")[0].pause();
$("#photoluyin")[0].play();
$(".addclickTip").hide();
$("#content_wrap .page-hook").addClass("animatestop");
$("#content_wrap .page-hook").removeClass("reverse");
$("#content_wrap .lastpage").show();
$("#content_wrap .datatime_wrap").addClass("lfontanimate");
$("#fonttips").typed({
strings: ["十里长亭，<br/> 望眼欲穿，<br/> 百相思，千系念，<br/> 万望卿亲临现场，<br/> 赐予好评~<br/>"],
typeSpeed: 150,
loop: false
});
}
}
},
swipDown: function () {
// if ($("#content_wrap").children().length < 16) {
// console.log("未加载完毕,滑动无效")
// } else {
// if ($("#content_wrap").data("flag")) {
// window.location.href = "index.html"
// }
// }
},
swipUp: function () {
if ($("#content_wrap").children().length < 16) {
console.log("未加载完毕,滑动无效")
} else {
if ($("#content_wrap").data("flag")) {
window.location.href = "card.html"
}
}
}
}
scrollAnimateObj.init();
$(window).load(function () {
$(".loadingcss").fadeOut(300);
setTimeout(function () {
$("#globalshow").css({
visibility: "visible"
});
}, 300);
})
</script>
</body>
</html>