html5摇一摇[转]

写在前面

年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。
原文地址：http://www.cnblogs.com/waitingbar/p/4682215.html
测试

html5摇一摇[转]
效果还行。
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>摇一摇</title>

         <style type="text/css">

             *{padding:;margin: }

             .shake_box {

                 background: url(images/xiaolian.png) no-repeat #1e2020 center center;

                 position: fixed;

                 top : ;

                 left: ;

                 width  : %;

                 height : %;

             }

             .shakTop,.shakBottom {

                 background: #282c2d;

                 position : fixed;

                 left  : ;

                 width : %;

                 height: %;

             }

             .shakTop    {top    : ;}

             .shakBottom {bottom : ;}

             .shakTop span,.shakBottom span{

                 background: url(images/shakBox.png) no-repeat;

                 position : absolute;

                 left: %;

                 width : 450px;

                 height: 254px;

                 margin:    -275px;

             }

             .shakTop    span{bottom : ;}

             .shakBottom span{

                 background-position:  -254px;

                 top : ;

             }

             .shake_box_focus .shakTop{

                 animation        : shakTop 1s  linear;

                 -moz-animation   : shakTop 1s  linear;

                 -webkit-animation: shakTop 1s  linear;

                 -ms-animation    : shakTop 1s  linear;

                 -o-animation     : shakTop 1s  linear;

             }

             .shake_box_focus .shakBottom{

                 animation        : shakBottom 1s  linear;

                 -moz-animation   : shakBottom 1s  linear;

                 -webkit-animation: shakBottom 1s  linear;

                 -ms-animation    : shakBottom 1s  linear;

                 -o-animation     : shakBottom 1s  linear;

             }

             /* 向上拉动画效果 */

             @-webkit-keyframes shakTop   {

                 %   {top: ;}

                 %  {top: -200px;}

                 % {top: ;}

             }

             @-moz-keyframes shakTop      {

                 %   {top: ;}

                 %  {top: -200px;}

                 % {top: ;}

             }

             @-ms-keyframes shakTop       {

                 %   {top: ;}

                 %  {top: -200px;}

                 % {top: ;}

             }

             @-o-keyframes shakTop        {

                 %   {top: ;}

                 %  {top: -200px;}

                 % {top: ;}

             }

             /* 向下拉动画效果 */

             @-webkit-keyframes shakBottom   {

                 %   {bottom: ;}

                 %  {bottom: -200px;}

                 % {bottom: ;}

             }

             @-moz-keyframes shakBottom      {

                 %   {bottom: ;}

                 %  {bottom: -200px;}

                 % {bottom: ;}

             }

             @-ms-keyframes shakBottom       {

                 %   {bottom: ;}

                 %  {bottom: -200px;}

                 % {bottom: ;}

             }

             @-o-keyframes shakBottom        {

                 %   {bottom: ;}

                 %  {bottom: -200px;}

                 % {bottom: ;}

             }

         </style>

         <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

         <script type="text/javascript">

             //先判断设备是否支持HTML5摇一摇功能

             if (window.DeviceMotionEvent) {

                 //获取移动速度，得到device移动时相对之前某个时间的差值比

                 window.addEventListener('devicemotion', deviceMotionHandler, false);

             }else{

                 alert('您好，你目前所用的设置好像不支持重力感应哦！');

             }

             //设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了

             var shakeThreshold = ;

             //设置最后更新时间，用于对比

             var lastUpdate     = ;

             //设置位置速率

             var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=;

             function deviceMotionHandler(event){

                 //获得重力加速

                 var acceleration =event.accelerationIncludingGravity;

                 //获得当前时间戳

                 var curTime = new Date().getTime();

                 if ((curTime - lastUpdate)> ) {

                     //时间差

                     var diffTime = curTime -lastUpdate;

                         lastUpdate = curTime;

                     //x轴加速度

                     curShakeX = acceleration.x;

                     //y轴加速度

                     curShakeY = acceleration.y;

                     //z轴加速度

                     curShakeZ = acceleration.z;

                     var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - lastShakeY - lastShakeZ) / diffTime * ;

                     if (speed > shakeThreshold) {

                         //TODO 相关方法，比如：

                         //播放音效

                         shakeAudio.play();

                         //播放动画

                         $('.shake_box').addClass('shake_box_focus');

                         clearTimeout(shakeTimeout);

                         var shakeTimeout = setTimeout(function(){

                             $('.shake_box').removeClass('shake_box_focus');

                         },)

                     }

                     lastShakeX = curShakeX;

                     lastShakeY = curShakeY;

                     lastShakeZ = curShakeZ;

                 }

             }

             //预加摇一摇声音

             var shakeAudio = new Audio();

                 shakeAudio.src = 'sound/shake_sound.mp3';

             var shake_options = {

                 preload  : 'auto'

             }

             for(var key in shake_options){

                 if(shake_options.hasOwnProperty(key) && (key in shakeAudio)){

                     shakeAudio[key] = shake_options[key];

                 }

             }

         </script>

     </head>

     <body>

         <div class="shake_box">

             <div class="shakTop"><span></span></div>

             <div class="shakBottom"><span></span></div>

         </div>

     </body>

 </html>
秒客网

html5摇一摇[转]

写在前面

测试

相关文章
