面是测试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)

坐标系见下图

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

1. window.onorientationchange=function(e){

2. game.hideNavBar(); //屏幕翻转时隐藏地址栏

3. if(game.stage) game.stage.updatePosition(); //更新舞台位置

4. };

6. window.ondeviceorientation=function(e)

7. {

8. var ang;

9. var o=window.orientation; //获取设备方向

10. if(o==90){

11. ang=e.beta; //设备横向1

12. }

13. else if(o==-90){

14. ang=-e.beta; //设备横向2

15. }

16. else if(o==0){

17. ang=e.gamma; //设备纵向

18. }

20. if(ang > 5)

21. {

22. keyState[Q.KEY.RIGHT]=true;

23. }

24. else if(ang < -5)

25. {

26. keyState[Q.KEY.LEFT]=true;

27. }

28. else

29. {

30. keyState[Q.KEY.RIGHT]=false;

31. keyState[Q.KEY.LEFT]=false;

32. }

33. }

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

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

前H5手机动态场景搭建非常火，当你想去搭建一个绚丽的动态场景时，第一时间你想到的是搜索市面上的提供该服务的平台，然后很开心的注册并制作，想要好的素材和动态效果时，就会坑爹的告诉你这是vip功能，去水印也要会员，唉。。。就不能有一个能好好免费使用的微场景网站吗，如果你是程序员 有福了

今天和小编分享一款手机Html5场景网站源码，只要你会php和基本的服务器搭建（或者虚拟主机），就可以轻松搭建自己的H5场景制作网站，你也可以运营，或者开账号给好友一起使用哦。

该版本基本已经是非常完善的了，已修复微信分享|扫描二维码问题...

适用范围： 目前网络上非常棒的H5手机动态场景搭建软件，仿易启秀手机Html5场景网站源码

运行环境： php5.3/5.4(win2003的iis环境下部署)+伪静态+Mysql

如果你是初级程序员可以研究别人的代码提高技术，如果你喜欢搞网盟或者外包，可以让你快速建站，还等什么赶快关注吧，我们会持续输出相关资源

评论回复相关需求，小编会第一时间私信您

或者私信回复“源码002”，自动获取素材和源文件（是私信不是评论哦，评论无法自动回复）

资源来自互联网 仅供学习研究之用，不得用于商业，请在24小时内删除！

版权归原作者及其公司所有，如果你喜欢，请购买正版。

果图

各位长友大家早上好！

今天给各位带来的是 HTML5+JS全屏星空特效源码！

有想要文件版源码的可以私聊小编哦！

废话不多说，上源码！

CSS：

body {margin:0 auto;overflow:hidden;}

/*=============第一页=============*/

.header{

margin:0 auto;

width:100%;

height:640px;

background-color:#000;

position:relative;

}