移动端之摇一摇
一、移动端重力感应事件
window.devicemotion事件在一个固定的间隔(极快的时间间隔)内被触发,并指定了设备在那个时候接收到的加速度的物理力的大小
在devicemotion事件回调函数的event参数中,有个属性可以来获取设备的运动传感器的加速度数据,
event.accelerationIncludingGravity返回一个DeviceAcceleration对象
DeviceAcceleration对象可以提供有关设备沿三个轴(x、y、z)的加速度的信息
DeviceAcceleration.x 沿X轴的加速度量(只读)
DeviceAcceleration.y 沿Y轴的加速度量(只读)
DeviceAcceleration.z 沿Z轴的加速度量(只读)
二、兼容安卓
//判断当前机型是否为安卓,如果是安卓返回true 如果不是安卓返回false
function getAdr(){
var u = navigator.userAgent;
return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
}
三、js代码实现
window.onload = function(){
document.addEventListener("touchstart", function(ev){
ev = ev || event;
ev.preventDefault();
});
var lastTime = 0;
var lastX = 0;
var isShake = false;
window.addEventListener("devicemotion", function(ev){
var now = new Date().getTime();
if(now - lastTime > 200){
ev = ev || event;
var motion = ev.accelerationIncludingGravity;
var x = Math.round(motion.x);
if(getAdr()){
x = -x;
}
if(lastX === 0){
lastX = x;
return;
}
if(Math.abs(x-lastX)>10){
isShake = true;
}
if(isShake && Math.abs(x-lastX)<2){
alert("摇一摇");
isShake = false;
}
lastX = x;
lastTime = now;
}
})
function getAdr(){
var u = navigator.userAgent;
return u.indexOf("Andriod")>-1 || u.indexOf("Adr")>-1;
}
}
更多专业前端知识,请上 【猿2048】www.mk2048.com