基本信息
源码名称：手机摇一摇html源码
源码大小：0.04M
文件格式：.rar
开发语言：CSS
更新时间：2016-05-26
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!doctype html>
<html><head>
    <meta charset="UTF-8">
    <title>简易模拟微信摇一摇</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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;
            -moz-animation: hand_move infinite 2s;
            -ms-animation: hand_move infinite 2s;
            -o-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); }
        }
    </style>
</head>
<body>

<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>摇晃结果的其他信息哈哈哈</div>
</div>

<div class="link" style="position:fixed;bottom:20px">
    <a href="yao1yao1.html">1、 获取设备信息</a><br>
    <a href="yao1yao2.html">2、 摇晃判断</a><br>
    <a href="yao1yao3.html">3、 简易模拟微信摇一摇</a><br>
    <a href="yao1yao4.html">4、 简易模拟微信摇一摇2</a>
</div>
<script>

    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('本设备不支持devicemotion事件');
    }
    var speed = 23;
    var x = y = z = lastX = lastY = lastZ = 0;
    function deviceMotionHandler(event) {
        var acceleration = event.accelerationIncludingGravity;
        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        if (Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed) {
            doResult();
        }
        lastX = x;
        lastY = y;
        lastZ = z;
    }
    function doResult() {
        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";
        }, 1000);
    }
</script>
</body>
</html>