HTML5摇一摇，如何判断设备摇动 – H5陀螺仪
Posted 编程有为
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5摇一摇，如何判断设备摇动 – H5陀螺仪相关的知识，希望对你有一定的参考价值。
好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>摇一摇抽签</title><meta charset="utf-8"><style>* {font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;}html, body {margin: 0;width: 100%;height: 100%;background: url("./img/background.jpg") no-repeat center center;background-size: cover;}/* 签筒摇动动画 */@keyframes play {100% {background-position: -737px -2px;}}@-webkit-keyframes play {100% {background-position: -737px -2px;}}.sprite {width: 145px;height: 300px;display: inline-block;overflow: hidden;background: url('./img/animation.png') no-repeat -2px -2px;animation: play 0.8s steps(5) infinite;-webkit-animation: play 0.8s steps(5) infinite;}/* 半透明遮罩层 */.cover {background-size: 50%;background: rgba(0, 0, 0, 0.7) no-repeat top right;position: fixed;width: 100%;height: 100%;top: 0;left: 0;display: none;}/* share */.share {position: absolute;width: 60%;top: 2px;right: 2px;}/* 解签的过渡图 */.decode .inner {width: 100%;height: 100%;background: url('./img/decode.png') center no-repeat;background-size: 80%;}/* 签筒摇动动画容器 */.item {width: 100%;text-align: center;position: absolute;top: 26%;}/* 静态签筒定位用的容器 */.qiancover{background-size: 50%;position: absolute;width: 100%;top: 26%;display: block;}/* 静态签筒 */.qian {width: 100px;height: 300px;margin: 0 auto;overflow: hidden;background: url('./img/qiantong.png') no-repeat -2px -2px;background-size: contain;}@media only screen and (max-height: 480px) {/*针对iphone 4s这类小屏幕手机优化签筒大小*/.qian {width: 88px;}}/* 对联标题 */.title {color: #d50000;position: absolute;top: 10%;width: 100%;text-align: center;}/* 摇晃按钮的动画 */@keyframes shake {0% {transform: scaleY(1) translate(30px);}50% {transform: translate(-30px);}100% {transform: scaleY(1) translate(30px);}}/* 底部摆动按钮的样式 */.buttonBox {position: absolute;bottom: 5%;width: 100%;}.shakeBtn {width: 76%;max-width: 300px;display: block;margin: 0 auto;cursor: pointer;/*animation: shake 1.5s steps(5) infinite;*/animation: shake 1.2s cubic-bezier(0, 0, 0.36, 1) infinite;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></head><body><div style="display:none"><!--这个隐藏的gif用于分享到微信时自动作为缩略图--><img src="./img/thumbnail.gif" /></div><h2 class="title">摇一摇, 来抽签</h2><section class="qiancover"><div class="qian"></div></section><section class="buttonBox"><img src="./img/button02.png" class="shakeBtn" onclick="start();"></section><div class="cover result"><img src="./img/share.png" class="share"><div class="item"><div class="sprite a1"></div></div></div><div class="cover decode"><div class="inner"></div></div><script src="./js/zepto.min.js"></script><script src="./js/index.js"></script></body></html>
js部分，记得需要zepot.js
;var isStarted = false;// 开始摇签function start() {isStarted = true;$('.qiancover').hide();$('.decode').hide();$('.result').show();// setTimeout(showDecode, 3000);}// 显示正在解签function showDecode() {$('.result').hide();$('.decode').show();setTimeout(jumpToDecode, 3000);}function jumpToDecode(){var urls = ["#", "#"];var jumpTo = urls[parseInt(Math.random() * urls.length)];window.location = jumpTo;};//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)if(window.DeviceMotionEvent) {var speed = 25;var x, y, z, lastX, lastY, lastZ;x = y = z = lastX = lastY = lastZ = 0;window.addEventListener('devicemotion', function(event){var acceleration = event.accelerationIncludingGravity;x = acceleration.x;y = acceleration.y;if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {start();}lastX = x;lastY = y;}, false);}
以上是关于HTML5摇一摇，如何判断设备摇动 – H5陀螺仪的主要内容，如果未能解决你的问题，请参考以下文章