html5摇一摇[转]

写在前面

年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。

原文地址：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>
View Code
posted @ 2016-01-24 12:13  wolfy  阅读(424)  评论(2)  编辑  收藏  举报