forked from confidence68/invitePage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3dqj.html
175 lines (159 loc) · 6.74 KB
/
3dqj.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>四海八荒的上神上仙们，你有一封快递已准时护送到，请卿亲启~</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />
<style type="text/css" title="Default">
body,
div,
h1,
h2,
h3,
span,
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* fullscreen */
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
overflow: hidden;
/* disable scrollbars */
font-size: 10pt;
}
/* fix for scroll bars on webkit & >=Mac OS X Lion */
::-webkit-scrollbar {
background-color: rgba(0, 0, 0, 0.5);
width: 0.75em;
}
::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.5);
}
.loadingcss {
position: absolute;
width: 109px;
height: 87px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: url("images/loading.gif") no-repeat center center;
background-size: 109px 87px;
}
.arrow-box {position: absolute;bottom: 0px;left: 0;right: 0;margin: 0 auto;width: 50%;height: 90px;border-radius: 100%;z-index: 9999;}
#array {-webkit-animation: start 1.5s infinite ease-in-out;display: block;margin: 15px auto 0 auto;height: 22px;z-index: 999;}
@-webkit-keyframes start {
0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
}
</style>
</head>
<body >
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<script type="text/javascript" src="pano2vr_player.js"></script>
<script type="text/javascript" src="pano2vrgyro.js"></script>
<a class="clickbtns" id="clickbtns" href="vedio.html"></a>
<div id="container" style="width:100%;height:100%;">
<div class="loadingcss"></div>
</div>
<div class="arrow-box">
<img src="images/sanjiao.png" id="array">
</div>
<audio preload="auto" hidden="true" autoplay="autoplay" src="media/place.mp3" type="audio/mpeg"></audio>
<script type="text/javascript">
// create the panorama player with the container
pano = new pano2vrPlayer("container");
window.addEventListener("load", function() {
pano.readConfigUrlAsync("pano.xml", function() {
gyro = new pano2vrGyro(pano, "container");
});
});
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("向上！");
window.location.href = "vedio.html";
break;
case 2:
console.log("向下！");
// window.location.href = "photo.html";
break;
case 3:
console.log("向左")
break;
case 4:
console.log("向右")
break;
default:
}
}, false);
</script>
<noscript>
<p><b>请允许js，目前你的浏览器阻止了js的加载!</b></p>
</noscript>
<!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - -->
<!-- Hack needed to hide the url bar on iOS 9, iPhone 5s -->
<div style="width:1px;height:1px;"></div>
</body>
</html>