您的位置：首页 > 移动开发 > 微信开发

微信摇一摇js

2016-07-29 18:52 302 查看

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) {
va
4000
r 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航