介紹之前做兩個聲明:
以下程式碼可以直接運行,當然你別忘了引用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>