好奇宝宝花点时间看了看这玩意儿,感觉还蛮好玩的样子,实际用处似乎不大,不过如果你是经常做移动端活动页面,那很可能用得上哦,不多说,直接贴代码和demo,有案例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | <!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"> <!--这个隐藏的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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | "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); } |
上一篇:在 iOS Safari中假装自动播放 HTML5 audio(音乐) 的正确方式
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"HTML5摇一摇,如何判断设备摇动 – H5陀螺仪"
最新评论