Pandora.Grav.Mobile.js

(function($) {
    $.fn.extend({
        //移动端-重力感应
        Grav: function(options) { var config = { ShakeRate: 200, //重力灵敏度 power: 200, //甩动力度 ShakeTotal: 3, //甩动次数 Shaking: function() {}, //甩动中 callback: function() {}; var grav = $.extend(config, options); var ShakeNum = 0; var x, y, z, lastX, lastY, lastZ, lastTime = 0; if (window.DeviceMotionEvent) { window.addEventListener("devicemotion", Handler, true); else { alert("然而你的设备并不支持重力感应。");; function Handler(eventDate) { var acceler = eventDate.accelerationIncludingGravity, curTime = new Date().getTime(), eventTime = curTime - lastTime; if (eventTime > 100) { lastTime = curTime; x = acceler.x; y = acceler.y; z = acceler.z; var ShakeSpeed = Math.abs(x / eventTime * grav.power; if (ShakeSpeed { ShakeNum++; grav.Shaking(); if (ShakeNum { window.removeEventListener("devicemotion", Handler, true); grav.callback(); ShakeNum = 0; return false;;; lastX = x; lastY = y; lastZ = z;;;);)(jQuery);

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>摇一摇</title>
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="Pandora.Grav.Mobile.min.js"></script>
<script src="Pandora.AutoSize.js"></script>//REM自适应JQ插件 代码见

<style>html{overflow: hidden;}
*{margin:0;padding:0;list-style:none;}
.xyp {width:15.00234411626817rem;height:26.7rem;background:url(images/yyy.jpg);background-size:100% 100%;}
.div1{width:15.00234411626817rem;height:26.7rem;z-index:2;display:none;}
.div1 img{width:100%;height:100%;}
.div2{
    width:5%;
    height:4.5%;
    position: relative;
    top:82%;
    left:47%;
    font-style:italic;
    color: red;
    font-weight: bold;
}</style>
<script>function(){
    document.body.addEventListener("touchmove",function(event){</script>
<script>function(){
    $("body").AutoSize();
    //对应属性:重力灵敏度,甩动力度,甩动次数,甩动中,甩动后
/*  $(document).Grav(200,200,3,function(){
        alert("摇动中。。。");
        },function(){
        alert("摇动了！");
        });*/
    var a = 3;
    yaoyiyao();
    function yaoyiyao(){
        $(document).Grav({
            ShakeRate: 200,
            //重力灵敏度
            power: 1000,
            //甩动力度
            ShakeTotal: 3,
            //甩动次数
            Shaking: function()
                //alert("甩动中");
            },
            //甩动中
            callback: function()
                //alert("甩动后");
                    a--;
                    $("#div1").css("display","block");
                    $("#div2").html(a);
            }
            //甩动后
        });
    }



    $("#div1").click(function()
        $("#div1").css("display","none");
        if (a>0) {
            yaoyiyao()
        }else{
            alert("您已经超出今日最大摇奖次数");
        }
    });
})
</script>
</head>
<body>
    <div class="xyp">
        <div class="div1" id="div1"><img src="images/yyy2.png" alt=""></div>
        <div class="div2" id="div2"></div>
    </div>
</body>
</html>