HTML5指南针

最新推荐文章于 2021-12-12 09:54:16 发布

weixin_30242907

最新推荐文章于 2021-12-12 09:54:16 发布

阅读量892

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/herechan/p/5176505.html

版权

deviceOrientation & deviceMotion

以上为HTML5的提供的两种接口

摇一摇功能（DeviceMotion）
重力感应方向控制/指南针（DeviceOrientation）

重力感应与罗盘 DeviceOrientation

当浏览器的Orientation发生变化时，触发DeviceOrientation事件，并返回一个DeviceOrientationEvent对象，属性如下：

alpha：设备的指示方向，根据指南针的设定情况而定
beta：设备围绕X轴旋转的角度
gama：设备围绕Y轴旋转的角度

工作原理

根据event对象的三个方向的参数来确定设备的旋转角度：

alpha的取值范围是0-360，一般来说，设备指向正北方向时为0。
beta值为设备绕x轴旋转的角度，取值范围为-180-180。
gamma取值范围-90-90.

当屏幕从水平沿y轴向左倾斜时gamma值变为负值，向右倾斜变为正值。

档屏幕从水平沿x轴向前倾斜时beta值变为正值，向后倾斜时变为负值。

实现指南针demo

首先为浏览器绑定deviceorientation事件和处理程序

//add deviceorientation event listener
if(window.DeviceOrientationEvent){//返回一个DeviceOrientationEvent对象
    window.addEventListener('deviceorientation',DeviceOrientationHandler,false);///添加监听事件
}else{
    alert("您的浏览器不支持DeviceOrientation");
}

function DeviceOrientationHandler(event) {
    alpha = event.alpha; //Z轴方向
    var beta = event.beta,//X轴方向
        gamma = event.gamma;//Y轴方向

    if (alpha != null) {
        arrow.style.webkitTransform = "rotate(" + alpha + "deg)";//箭头旋转
    }
}

转载于:https://www.cnblogs.com/herechan/p/5176505.html