H5重力感应事件

发表于

越来越多地，基于web的设备能够确定它们的方向; 也就是说，它们可以报告指示相对于重力拉力的它们的取向的改变的数据。特别地，通过这些数据，像手机等一些手持设备可以实现自动调整旋转角度来保持显示直立，以及当设备旋转到宽屏时（宽度大于高度），自动提供宽屏的网页效果。

有两种Javascript事件负责处理设备方向信息。

第一种是DeviceOrientationEvent（提供给网页开发者当设备（指手机，平板等移动设备）在浏览页面时物理旋转的信息。）它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，使针对由于用户移动设备引起旋转和仰角变化的行为设计交互响应成为可能。

第二种是DeviceMotionEvent，它会在加速度发生改变时触发。跟DeviceOrientationEvent不同，监听的是加速度的变化而不是方向。传感器通常都具有监听DeviceMotionEvent的能力，包括笔记本中用于保护移动存储设备的传感器。而能监听DeviceOrientationEvent事件的传感器更多出现在移动设备中。

处理方向orientation事件

要接收设备方向变化信息，你只需要注册监听deviceorientation事件：

1
window.addEventListener("deviceorientation", handleOrientation, true);

注册完事件监听处理函数后（对应例子中的handleOrientation)，监听函数会定期地接收到最新的设备方向数据。
方向事件对象中包含四个值：
DeviceOrientationEvent.absolute
DeviceOrientationEvent.alpha
DeviceOrientationEvent.beta
DeviceOrientationEvent.gamma

下面是一个事件处理函数的例子：

1
2
3
4
5
6
7
8
function handleOrientation(orientData) {
  var absolute = orientData.absolute;
  var alpha = orientData.alpha;
  var beta = orientData.beta;
  var gamma = orientData.gamma;
  // Do stuff with the new orientation data
}

关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。Orientation and motion data explained这篇文章有更详细的描述，下面是对这篇文章的总结。
DeviceOrientationEvent.alpha 表示设备沿z轴上的旋转角度，范围为0~360。
DeviceOrientationEvent.beta 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。
DeviceOrientationEvent.gamma 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

例子

这个例子会成功运行在支持检测自己方向的设备中的支持deviceorientation事件的浏览器中。

想象一下花园（garden）中的一个球（ball）：
https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation

https://developer.mozilla.org/zh-CN/docs/Web/API/DeviceOrientationEvent

https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Orientation_and_motion_data_explained

webapp开发相关jquery手势事件之jGestures
http://www.haorooms.com/post/jquery_jGestures

html5图片随手机重力感应而移动效果
http://www.haorooms.com/post/html5_image_zlgy

视觉差效果制作总结和案例下载
http://blog.csdn.net/confidence68/article/details/52054556