微信摇一摇js

最新推荐文章于 2023-08-27 22:36:32 发布

xyphf_和派孔明

最新推荐文章于 2023-08-27 22:36:32 发布

阅读量771

点赞数

分类专栏： DOM&BOM操作 HTML5 文章标签：微信函数移动摇一摇

本文链接：https://blog.csdn.net/xyphf/article/details/52067835

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

HTML5

52 篇文章 0 订阅

订阅专栏

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 + y + z - lastX - lastY - lastZ) / eventTime * grav.power; if (ShakeSpeed > grav.ShakeRate) { ShakeNum++; grav.Shaking(); if (ShakeNum == grav.ShakeTotal) { 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插件 代码见http://blog.csdn.net/xyphf/article/details/51723316

<style>
html{overflow: hidden;}
*{margin:0;padding:0;list-style:none;}
.xyp {width:15.00234411626817rem;height:26.7rem;background:url(images/yyy.jpg) no-repeat;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>
window.onload = function(){
    document.body.addEventListener("touchmove",function(event){
        event.preventDefault();
        });
    };
</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>