面是測試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;

}