【轉】利用js來實作微信搖一搖來自動更換網頁背景的功能

微信推出後，他的搖一搖功能非常的火爆，沒事來微信搖一搖加加好友，我們可不可以借鑒一下微信的搖一搖功能，讓手機通路網頁的時候，隻要手機搖一搖，網頁背景就會自動随時換一個網頁背景。

具體想要用搖一搖的功能思路已經确認的了，現在就是來實作代碼的了。我們現在是用javascript來實作搖一搖的功能。js搖一搖的代碼如下：

<a target="_blank" href="http://www.itokit.com/2014/0115/75021.html">http://www.itokit.com/2014/0115/75021.html</a>

=========================================================

用javascript實作手機搖一搖

=================================================

html5一個重要特性就是deviceorientation，它将底層的方向傳感器和運動傳感器進行了進階封裝，提供了dom事件的支援。這個特性包括兩種事件： 

1、 deviceorientation：封裝了方向傳感器資料的事件，可以擷取手機靜止狀态下的方向資料，例如手機所處角度、方位、朝向等。 

2、 devicemotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。 使用它我們能夠很容易的實作重力感應、指南針等有趣的功能，在手機上将非常有用。例如opera h5體驗版裡的重力感應球示例就是通過監聽deviceorientation api的deviceorientation事件來實作的。 其實它還能幫助我們在網頁上實作一個手機應用裡非常常見而時尚的功能：手機搖一搖。 devicemotionevent(裝置運動事件)傳回裝置有關于加速度和旋轉的相關資訊。加速度的資料将包含三個軸：x，y和z(示意如下圖所示，x軸橫向貫穿手機螢幕或者筆記本鍵盤，y軸縱向貫穿手機螢幕或筆記本鍵盤，z軸垂直于手機螢幕或筆記本鍵盤)。因為有些裝置可能沒有硬體來排除重力的影響，該事件會傳回兩個屬性，accelerationincludinggravity(含重力的加速度)和acceleration(加速度)，後者排除了重力的影響。

1. [代碼]監聽運動傳感事件 

2. [代碼]擷取含重力的加速度 

3. [代碼]核心方法實作代碼 

html5一個重要特性就是deviceorientation，它将底層的方向傳感器和運動傳感器進行了進階封裝，提供了dom事件的支援。這個特性包括兩種事件：

1、 deviceorientation：封裝了方向傳感器資料的事件，可以擷取手機靜止狀态下的方向資料，例如手機所處角度、方位、朝向等。

2、 devicemotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。

使用它我們能夠很容易的實作重力感應、指南針等有趣的功能，在手機上将非常有用。例如opera h5體驗版裡的重力感應球示例就是通過監聽deviceorientation

api的deviceorientation事件來實作的。

其實它還能幫助我們在網頁上實作一個手機應用裡非常常見而時尚的功能：手機搖一搖。

devicemotionevent(裝置運動事件)傳回裝置有關于加速度和旋轉的相關資訊。加速度的資料将包含三個軸：x，y和z(示意如下圖所示，x軸橫向貫穿手機螢幕或者筆記本鍵盤，y軸縱向貫穿手機螢幕或筆記本鍵盤，z軸垂直于手機螢幕或筆記本鍵盤)。因為有些裝置可能沒有硬體來排除重力的影響，該事件會傳回兩個屬性，accelerationincludinggravity(含重力的加速度)和acceleration(加速度)，後者排除了重力的影響。