不同手机系统实现H5重力感应 - 晓九已存在

时间:2024-03-04 09:43:01

不同手机系统实现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;
}

}
}
}