(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>