HTML5 DeviceOrientation實作手機網站搖晃功能程式碼實例_html5教學技巧

介紹之前做兩個聲明：

以下程式碼可以直接運行，當然你別忘了引用jQuery才行。

複製程式碼

程式碼如下:

<script><br />// DeviceOrientation將底層的方向感測器和運動感測器進行了進階封裝，提供了DOM事件的支援。 <br />// 這個特性包括兩個事件：<br />// 1、deviceOrientation：封裝了方向感測器資料的事件，可以取得手機靜止狀態下的方向資料（手機所處的角度、方位和朝向等） 。 <br />// 2、deviceMotion：封裝了運動感測器的事件，可以取得手機運動狀態下的運動加速度等資料。 <br />// 使用這兩個事件，可以很能夠實現重力感應、指南針等有趣的功能。 <p>// 現在在許多Native應用程式中有一個非常常見而時尚的功能 —— 搖一搖，搖一搖找人、搖一搖看新聞、搖一搖找金幣。 。 。 <br />// 也許在android或ios的客戶端上對這個功能你已經很了解了，但是現在，我將告訴你如何在手機網頁上實現搖一搖的功能。 <p>// OK，那我們現在就開始吧，嘿嘿~<br />// 先來讓我們了解一下設備運動事件—— DeviceMotionEvent:返回設備關於加速度和旋轉的相關信息，其中加速度的數據包含以下三個方向：<br />// x：橫向貫穿手機螢幕；<br />// y：縱向貫穿手機螢幕；<br />// z：垂直手機螢幕。 <br />// 鑑於有些裝置沒有排除重力的影響，所以事件會傳回兩個屬性：<br />// 1、accelerationIncludingGravity(含重力的加速度)<br />// 2、acceleration(排除重力影響的加速度) <p>// 身為碼農，上碼是最直接的，come on，代號走起！ <p>// 首先在頁面上要監聽運動傳感事件<br />function init(){<br />　　if (window.DeviceMotionEvent) {<br />　　　　// 移動瀏覽器支持運動傳感事件<br />　　　　window 。 $("#yaoyiyaono").show();<br />　　} <br />} <p>// 那麼，我們要如何計算使用者是否是在搖動手機呢？可以從以下幾點考慮：<br />// 1、其實用戶在搖動手機的時候始終都是以一個方向為主進行搖動的；<br />// 2、用戶在搖動手機的時候在x、 y、z三個方向都會有相應的想速度的變化；<br />// 3、不能把用戶正常的手機運動行為當做搖一搖（手機放在兜裡，走路的時候也會有加速度的變化）。 <br />// 從以上三點考慮，針對三個方向上的加速度進行計算，間隔測量他們，考察他們在固定時間段裡的變化率，而且需要確定一個閥值來觸發搖一搖之後的操作。 <p>// 首先，定義一個搖晃的閥值<br />var SHAKE_THRESHOLD = 3000;<br />// 定義一個變數保存的時間<br />var last_update = 0;<br />// 緊接著定義x、y、z記錄三個軸的資料以及上一次出發的時間<br />var x;<br />var y;<br />var z;<br />var last_x;<br />var last_y;<br />var last_z; <p>// 為了增加這個例子的一點無聊趣味性，增加一個計數器<br />var count = 0; <p>function deviceMotionHandler(eventData) {<br />　　// 取得含重力的加速度<br />　　var acceleration = eventData.accelerationIncludingGravity; <p>　　// 取得目前時間<br />　　var curTime = new Date().getTime(); <br />　　var diffTime = curTime -last_update;<br />　　/// 固定時間段<br />　{<br />　　　　last_update = curTime; <p>　　　　x = acceleration.x; <br />　　　　y = acceleration.y; <br />　　　　z = acceleration.y; < >　　　　z = acceleration.z; > <p>　　　　var speed = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000; <p>　　　　if (speed > SHAKE_THRESHOLD) { <br />　　　　　　// TODO:在此處可以實現搖　　　、　　$("#yaoyiyaoyes").hide( );<br />　　　　　　$("#yaoyiyaoresult").show();<br />　　　　　　$("#yaoyiyaoresult")。 /p> <p>　　　　last_x = x; <br />　　　　last_y = y; <br />　　　　last_z = z; <br />　　} <="＀} <) <br />="<o　}<="> <<3] <o<at; <m<; <<a;<3] <o<; -size:20px;margin:10px;line-height:35px;display:none;"><br />　　兄弟，如果您看到了我，說明您現在還不能搖，不是說您沒有資格用我，而是： <br />1.如果您使用PC機的瀏覽器，那可就不對了，我只愛手機瀏覽器；<br />　　2、如果您是Android手機，那不好意思告訴你，android自帶的瀏覽器拋棄了我，您可以用UCWeb、chrome等第三方瀏覽器；<br />　　3、如果您都不屬於以上兩種情況，那我只有告訴您：您改換手機啦！ ！ ！ <br /></script>

　　兄弟兄弟，搖一個吧，說不定有個清純的妹子等著你呢!

<script><br />$(document).ready(function(){<br />init();<br />});<br />< /script><br /></script>