HTML5摇一摇，如何判断设备摇动 – H5陀螺仪

最新推荐文章于 2024-03-25 16:07:06 发布

晴天暖宝宝

最新推荐文章于 2024-03-25 16:07:06 发布

阅读量358

点赞数

文章标签： js

本文链接：https://blog.csdn.net/txun123/article/details/124003363

版权

好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例

<!DOCTYPE html>
<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">
  
  <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" οnclick="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

"use strict";
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);
}

走自己的路，让别人说去。——但丁《神曲》

晴天暖宝宝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5摇一摇，如何判断设备摇动 – H5陀螺仪

好奇宝宝花点时间看了看这玩意儿，感觉还蛮好玩的样子，实际用处似乎不大，不过如果你是经常做移动端活动页面，那很可能用得上哦，不多说，直接贴代码和demo，有案例<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>摇一摇抽签</title> <meta charset="utf-8"> <style> ...
复制链接

扫一扫