html5摇一摇[转]-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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>
复制代码
博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/5154930.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章