当前位置：网站首页 > 文章教程 > 正文

html5重力感应剖析附源码

yund56 2025-07-01 01:22 28 浏览

下面是测试html5重力感应的demo

http://bbs.qietu.com/html/zhongli/

http://www.qietu.com/html/f2/qqqianbao/

demo2是切图网为腾讯网提供的web前端技术支持的项目，采用的就是html5的重力感应。

重力感应主要用到两种事件：

1 orientationchange

这个事件在屏幕发生翻转时触发

window.orientation可获得设备的方向，一共有三个值0：竖直, 90：右旋, -90：左旋

2 deviceorientation 和 MozOrientation(firefox专用)

deviceorientation事件可获得三个值alpha,beta,gamma，分别代表绕Z轴的旋转角度(0~360)，绕X轴的旋转角度(-180~180)，绕Y轴的旋转角度(-90~90)

MozOrientation事件中可获得三个值z,x,y，分别代表垂直加速度，左右的倾斜角度，前后的倾斜角度(取值范围：-1~1)

坐标系见下图

下面是示例游戏用到重力感应的代码：

无附件，源码面前，了无秘密，作为web前端工程师，我们需要具备查看源码的能力。

原文：
http://bbs.qietu.com/forum.php?mod=viewthread&tid=15036

相关推荐