写在前面
年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。
原文地址：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>