天天看點

微信搖一搖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);      
<!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>      

繼續閱讀