首頁  >  文章  >  web前端  >  HTML5 DeviceOrientation實作手機網站搖晃功能程式碼實例_html5教學技巧

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

WBOY
WBOY原創
2016-05-16 15:46:501262瀏覽

介紹之前做兩個聲明:

以下程式碼可以直接運行,當然你別忘了引用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>
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn