HTML5摇一摇代码微信摇一摇移动端摇一摇

共9个文件

png：3个

js：2个

mp3：1个

HTML5

微信摇一摇

5星 · 超过95%的资源需积分: 45 25 浏览量 2015-09-17 09:23:26 上传评论 6 收藏 134KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

yaoyiyao.zip （9个子文件）

yaoyiyao

spinner.png 8KB

images

qrcode.png 22KB

shake.js 4KB

jquery-1.8.3.min.js 91KB

yy2.htm 5KB

5018.mp3 46KB

hand.png 29KB

yyy.html 6KB

_notes

yyy.html.mno 402B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/shake.js"></script> <title>无标题文档</title> <style> * { margin: 0; padding: 0; } body { background: #292D2E; } .hand { width: 190px; height: 300px; background: url(hand.png) no-repeat; position: absolute; top: 50px; left: 50%; margin-left: -95px; } .hand-animate { -webkit-animation: hand_move infinite 2s; } .result { background: #393B3C; border: #2C2C2C 1px solid; box-shadow: inset #4D4F50 0 0 0 1px; border-radius: 10px; color: #fff; padding: 10px; width: 300px; position: absolute; top: 300px; left: 50%; margin-left: -161px; opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .result .pic { width: 50px; height: 50px; float: left; background: #fff; } .result .con { overflow: hidden; zoom: 1; padding-left: 10px; line-height: 24px; } .result-show { opacity: 1; margin-top: 50px; } .loading { position: absolute; top: 240px; left: 50%; margin-left: -50px; width: 100px; height: 100px; background: url(spinner.png) no-repeat; background-size: 100px 100px; opacity: 0; -webkit-animation: loading infinite linear .5s; -moz-animation: loading infinite linear .5s; -ms-animation: loading infinite linear .5s; -o-animation: loading infinite linear .5s; animation: loading infinite linear .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .loading-show { opacity: 1; } @-webkit-keyframes hand_move { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 100% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } #yaomain{ text-align:center;} #yaomain .pc{ margin-top:50px;} #yaomain .pct{ margin-top:10px; color:#FFF;} </style> </head> <body> <div id="yaomain"> <div id="hand" class="hand hand-animate"></div> <div id="loading" class="loading"></div> <div id="result" class="result"> <div class="pic"></div> <div class="con">摇晃结果<br/><font id="reshtml">大奖一个</font></div> </div> </div>  <script> if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))){ //$("#yaomain").html('<p>使劲晃动您的手机</p><img src="images/z1.jpg" width="300" height="300"><p>灰色</p>'); }else{ $("#yaomain").html('<img src="images/qrcode.png" class="pc" width="190" height="190"><p class="pct">手机扫描二维码看效果</p>'); } window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); }; function shakeEventDidOccur () { //alert("你摇完了"); doResult(); /*var acceleration = eventData.accelerationIncludingGravity; var curTime = new Date().getTime(); if ((curTime - last_update) > 100) { var diffTime = curTime - last_update; last_update = curTime; x = acceleration.x; y = acceleration.y; z = acceleration.z; var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000; var status = document.getElementById("status"); if (speed > SHAKE_THRESHOLD) { doResult(); } last_x = x; last_y = y; last_z = z; }*/ } function doResult() { //media.setAttribute("src", "5018.mp3"); // media.load(); // media.play(); var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; var num = Math.floor(Math.random()*4); var html = "恭喜，摇得"+arr[num]+"！"; $("#reshtml").html(html); document.getElementById("result").className = "result"; document.getElementById("loading").className = "loading loading-show"; setTimeout(function(){ //document.getElementById("hand").className = "hand"; document.getElementById("result").className = "result result-show"; document.getElementById("loading").className = "loading"; }, 500); } </script> </body> </html>

评论收藏

内容反馈