不同手机系统实现H5重力感应
2017-03-23 09:55 晓九已存在 阅读(1134) 评论(0) 编辑 收藏 举报1.deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等
2.deviceMotion:封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据
js代码
if(window.DeviceOrientationEvent) { //绑定重力感应事件
window.addEventListener("deviceorientation", orientationHandler, false);
}
else {
document.body.innerHTML = "What user agent u r using";
};
function orientationHandler(event) {
var isScro = true;
if(isScro) {
//获取重力感应的两个个参数
var gamma = parseInt(event.gamma);
var alpha = parseInt(event.beta);
//获取手机手机版本信息
var ua = navigator.userAgent.toLowerCase();
var dragBodyH = $("#dragBody").height();
var dragWrapH = $(document).height();
var multiple = dragWrapH / dragBodyH;
var sL = $("#dragWrap").scrollLeft();
moveL = sL;
//判断不同手机版本
if(ua.match(/Android/i) == "android" || (ua.match(/iPhone/i) == "iphone" && ua.match(/OS [3-5]_\d[_\d]* like Mac OS X/i))) {
//手机向左倾斜时,地图向左移动
if(gamma > 10) {
moveL += 10;
//手机向前倾斜时,地图向上移动
if(moveL >= 1400) {
moveL = 1400;
}
$("#dragWrap").animate({
scrollLeft: moveL
}, 50);
isScro = false;
//利用定时器,解决手机移动时卡顿的问题
setTimeout(function() {
isScro = true
}, 101);
return moveL;
} else if(gamma < -10) {
moveL -= 10;
if(moveL <= 0) {
moveL = 1;
}
}
}
}