写在前面
年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。
原文地址：http://www.cnblogs.com/waitingbar/p/4682215.html
测试
效果还行。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>摇一摇</title>
6 <style type="text/css">
7 *{padding:0;margin: 0}
8 .shake_box {
9 background: url(images/xiaolian.png) no-repeat #1e2020 center center;
10 position: fixed;
11 top : 0;
12 left: 0;
13 width : 100%;
14 height : 100%;
15 }
16 .shakTop,.shakBottom {
17 background: #282c2d;
18 position : fixed;
19 left : 0;
20 width : 100%;
21 height: 50%;
22 }
23 .shakTop {top : 0;}
24 .shakBottom {bottom : 0;}
25
26 .shakTop span,.shakBottom span{
27 background: url(images/shakBox.png) no-repeat;
28 position : absolute;
29 left: 50%;
30 width : 450px;
31 height: 254px;
32 margin: 0 0 0 -275px;
33 }
34 .shakTop span{bottom : 0;}
35 .shakBottom span{
36 background-position: 0 -254px;
37 top : 0;
38 }
39
40 .shake_box_focus .shakTop{
41 animation : shakTop 1s 1 linear;
42 -moz-animation : shakTop 1s 1 linear;
43 -webkit-animation: shakTop 1s 1 linear;
44 -ms-animation : shakTop 1s 1 linear;
45 -o-animation : shakTop 1s 1 linear;
46 }
47 .shake_box_focus .shakBottom{
48 animation : shakBottom 1s 1 linear;
49 -moz-animation : shakBottom 1s 1 linear;
50 -webkit-animation: shakBottom 1s 1 linear;
51 -ms-animation : shakBottom 1s 1 linear;
52 -o-animation : shakBottom 1s 1 linear;
53 }
54
55 /* 向上拉动画效果 */
56 @-webkit-keyframes shakTop {
57 0% {top: 0;}
58 50% {top: -200px;}
59 100% {top: 0;}
60 }
61 @-moz-keyframes shakTop {
62 0% {top: 0;}
63 50% {top: -200px;}
64 100% {top: 0;}
65 }
66 @-ms-keyframes shakTop {
67 0% {top: 0;}
68 50% {top: -200px;}
69 100% {top: 0;}
70 }
71 @-o-keyframes shakTop {
72 0% {top: 0;}
73 50% {top: -200px;}
74 100% {top: 0;}
75 }
76
77 /* 向下拉动画效果 */
78 @-webkit-keyframes shakBottom {
79 0% {bottom: 0;}
80 50% {bottom: -200px;}
81 100% {bottom: 0;}
82 }
83 @-moz-keyframes shakBottom {
84 0% {bottom: 0;}
85 50% {bottom: -200px;}
86 100% {bottom: 0;}
87 }
88 @-ms-keyframes shakBottom {
89 0% {bottom: 0;}
90 50% {bottom: -200px;}
91 100% {bottom: 0;}
92 }
93 @-o-keyframes shakBottom {
94 0% {bottom: 0;}
95 50% {bottom: -200px;}
96 100% {bottom: 0;}
97 }
98 </style>
99
100 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
101 <script type="text/javascript">
102 //先判断设备是否支持HTML5摇一摇功能
103 if (window.DeviceMotionEvent) {
104 //获取移动速度，得到device移动时相对之前某个时间的差值比
105 window.addEventListener('devicemotion', deviceMotionHandler, false);
106 }else{
107 alert('您好，你目前所用的设置好像不支持重力感应哦！');
108 }
109
110 //设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了
111 var shakeThreshold = 3000;
112 //设置最后更新时间，用于对比
113 var lastUpdate = 0;
114 //设置位置速率
115 var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;
116
117 function deviceMotionHandler(event){
118
119 //获得重力加速
120 var acceleration =event.accelerationIncludingGravity;
121
122 //获得当前时间戳
123 var curTime = new Date().getTime();
124
125 if ((curTime - lastUpdate)> 100) {
126
127 //时间差
128 var diffTime = curTime -lastUpdate;
129 lastUpdate = curTime;
130
131
132 //x轴加速度
133 curShakeX = acceleration.x;
134 //y轴加速度
135 curShakeY = acceleration.y;
136 //z轴加速度
137 curShakeZ = acceleration.z;
138
139 var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * 10000;
140
141 if (speed > shakeThreshold) {
142 //TODO 相关方法，比如：
143
144 //播放音效
145 shakeAudio.play();
146 //播放动画
147 $('.shake_box').addClass('shake_box_focus');
148 clearTimeout(shakeTimeout);
149 var shakeTimeout = setTimeout(function(){
150 $('.shake_box').removeClass('shake_box_focus');
151 },1000)
152
153 }
154
155 lastShakeX = curShakeX;
156 lastShakeY = curShakeY;
157 lastShakeZ = curShakeZ;
158 }
159 }
160
161
162 //预加摇一摇声音
163 var shakeAudio = new Audio();
164 shakeAudio.src = 'sound/shake_sound.mp3';
165 var shake_options = {
166 preload : 'auto'
167 }
168 for(var key in shake_options){
169 if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){
170 shakeAudio[key] = shake_options[key];
171 }
172 }
173 </script>
174 </head>
175
176 <body>
177 <div class="shake_box">
178 <div class="shakTop"><span></span></div>
179 <div class="shakBottom"><span></span></div>
180 </div>
181 </body>
182 </html>
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/5154930.html |
时间： 2024-11-03 18:29:19