![html5摇一摇[转],第1张](/aiimages/html5%E6%91%87%E4%B8%80%E6%91%87%5B%E8%BD%AC%5D.png "html5摇一摇[转],第1张")
概述写在前面年底了，有些公司会出一个摇奖的活动，今天在家没事就搜了一下这方面的资料。原文地址：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;}2526 .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 }3940 .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 }5455 /* 向上拉动画效果 */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 }7677 /* 向下拉动画效果 */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>99100 <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 }109110 //设置临界值,这个值可根据自己的需求进行设定，默认就3000也差不多了111 var shakeThreshold = 3000;112 //设置最后更新时间，用于对比113 var lastUpdate = 0;114 //设置位置速率115 var curShakeX=curShakeY=curShakeZ=lastShakeX=lastShakeY=lastShakeZ=0;116117 function deviceMotionHandler(event){118119 //获得重力加速120 var acceleration =event.accelerationIncludingGravity;121122 //获得当前时间戳123 var curTime = new Date().getTime();124125 if ((curTime - lastUpdate)> 100) {126127 //时间差128 var diffTime = curTime -lastUpdate;129 lastUpdate = curTime;130131132 //x轴加速度133 curShakeX = acceleration.x;134 //y轴加速度135 curShakeY = acceleration.y;136 //z轴加速度137 curShakeZ = acceleration.z;138139 var speed = Math.abs(curShakeX + curShakeY + curShakeZ - lastShakeX - last 写在前面
测试
> 摇一摇 => => => 总结 以上是内存溢出为你收集整理的html5摇一摇[转]全部内容，希望文章能够帮你解决html5摇一摇[转]所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
微信扫一扫
支付宝扫一扫
评论列表（0条）