detail.html
9.68 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
{template 'common/header'}
<script type="text/javascript">
$(function(){
if (window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
alert('您使用的设备或是浏览器不支持摇一摇功能，如果您是Android手机，您可以用UCWeb、chrome等第三方浏览器。')
}
});
var SHAKE_THRESHOLD = {php echo empty($reply['speed']) ? 3000 : $reply['speed']};
var INTERVAL = {php echo empty($reply['interval']) ? 100 : $reply['interval']};
var MAXSHAKECOUNT = {php echo empty($reply['maxshake']) ? 100 : $reply['maxshake']};
var last_update = 0;
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
var lastupdate = 0;
var shakecount = 0;
function deviceMotionHandler(eventData) {
var acceleration = eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
var diffTime = curTime -last_update;
if (diffTime > INTERVAL) {
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD && shakecount < MAXSHAKECOUNT) {
if ($('#shake-animation').attr('class') == 'shake-pic') {
$('#shake-animation').attr('class', 'shake-pic opr-texiao-shake');
} else {
$('#shake-animation').attr('class', 'shake-pic');
}
{if !empty($member['status'])}
$.getJSON('{php echo $this->createMobileUrl('shake', array('rid' => $reply['rid']))}', function(s){
if (s.message.status == '2' || s.message.status == '0') {
location.href = '{php echo $this->createMobileUrl('detail', array('rid' => $reply['rid'], 'weid' => $_W['weid']))}';
return;
}
if (s.message.lastupdate > lastupdate) {
if (s.message.shakecount >= MAXSHAKECOUNT) {
return;
}
lastupdate = s.message.lastupdate;
shakecount = s.message.shakecount;
return;
}
});
{/if}
}
last_x = x;
last_y = y;
last_z = z;
}
}
</script>
<style>
body{background:#282c2d;}
.common-bg{filter:Alpha(opacity=70); background:#000; background:rgba(0, 0, 0, 0.7); -moz-border-radius:4px; border-radius:4px;}
.shake-main{}
.shake-nav-bottom{overflow:hidden; width:100%; position:absolute; left:0; bottom:15px;}
.shake-nav-bottom .col-xs-6{text-align:center;}
.shake-nav-bottom .col-xs-6 i{font-size:30px;}
.shake-nav-bottom .col-xs-6 a{color:#5f6364; text-decoration:none;}
.shake-pic{height:210px; background:url('../addons/we7_shake/template/mobile/shake.png') no-repeat center; margin-top:40%;}
@keyframes page_rotate{from{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}to{transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg)}}
@-webkit-keyframes page_rotate{from{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}to{transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg)}}
@keyframes page_rotateY{from{transform:rotateY(0deg);-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-o-transform:rotateY(0deg)}29%,71%{transform:rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg)}to{transform:rotateY(360deg);-ms-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-o-transform:rotateY(360deg)}}
@-webkit-keyframes page_rotateY{from{transform:rotateY(0deg);-ms-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-o-transform:rotateY(0deg)}29%,71%{transform:rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg)}to{transform:rotateY(360deg);-ms-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-o-transform:rotateY(360deg)}}
@keyframes page_fadeIn{from{opacity:0}to{opacity:1}}
@-webkit-keyframes page_fadeIn{from{opacity:0}to{opacity:1}}
@keyframes page_blink{40%,from{opacity:1}45%,55%{opacity:0}60%,to{opacity:1}}
@-webkit-keyframes page_blink{40%,from{opacity:1}45%,55%{opacity:0}60%,to{opacity:1}}
@keyframes page_jump{from{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}17%{transform:translateY(-200px);-ms-transform:translateY(-200px);-moz-transform:translateY(-200px);-webkit-transform:translateY(-200px);-o-transform:translateY(-200px)}33%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}49%{transform:translateY(-100px);-ms-transform:translateY(-100px);-moz-transform:translateY(-100px);-webkit-transform:translateY(-100px);-o-transform:translateY(-100px)}66%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}83%{transform:translateY(-50px);-ms-transform:translateY(-50px);-moz-transform:translateY(-50px);-webkit-transform:translateY(-50px);-o-transform:translateY(-50px)}to{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}}
@-webkit-keyframes page_jump{from{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}17%{transform:translateY(-200px);-ms-transform:translateY(-200px);-moz-transform:translateY(-200px);-webkit-transform:translateY(-200px);-o-transform:translateY(-200px)}33%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}49%{transform:translateY(-100px);-ms-transform:translateY(-100px);-moz-transform:translateY(-100px);-webkit-transform:translateY(-100px);-o-transform:translateY(-100px)}66%{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}83%{transform:translateY(-50px);-ms-transform:translateY(-50px);-moz-transform:translateY(-50px);-webkit-transform:translateY(-50px);-o-transform:translateY(-50px)}to{transform:translateY(0);-ms-transform:translateY(0);-moz-transform:translateY(0);-webkit-transform:translateY(0);-o-transform:translateY(0)}}
@keyframes page_shake{from{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}4%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}12.5%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}21%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}29%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}37.5%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}46%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}50%,to{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}}
@-webkit-keyframes page_shake{from{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}4%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}12.5%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}21%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}29%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}37.5%{transform:rotate(5deg);-ms-transform:rotate(5deg);-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-o-transform:rotate(5deg)}46%{transform:rotate(-5deg);-ms-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-o-transform:rotate(-5deg)}50%,to{transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg)}}
.opr-texiao-rotate{animation:page_rotate 4s ease;-webkit-animation:page_rotate 4s ease}
.opr-texiao-rotateY{animation:page_rotateY 7s ease;-webkit-animation:page_rotateY 7s ease}
#wrapper_wrapper.opr-texiao-fadeIn{animation:page_fadeIn 4s ease;-webkit-animation:page_fadeIn 4s ease}
em.opr-texiao-blink{animation:page_blink 1.3s ease 0s 5;-webkit-animation:page_blink 1.3s ease 0s 5}
.opr-texiao-jump{animation:page_jump 2s ease;-webkit-animation:page_jump 2s ease}
.opr-texiao-shake{animation:page_shake 2s ease 0s 1;-webkit-animation:page_shake 2s ease 0s 1}
</style>
<div class="shake-main">
{if $reply['status'] == 2}
<div class="common-bg" style="padding:10px; color:#FFF;">活动结束，请查看大屏幕中奖情况。</div>
{/if}
<div class="shake-pic" id="shake-animation"></div>
</div>
{php $footer_off = 1;}
{template 'common/footer'}