HTML5使用DeviceOrientation實現搖一搖功能_jquery

DeviceOrientation包括兩個事件：

1、deviceOrientation：封裝了方向傳感器數據的事件，可以獲取手機靜止狀態下的方向數據，例如手機所處角度、方位、朝向等。
2、deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

HTML

頁面上有一個div#hand，用來放置一個手搖的圖片，div#result用來展示搖動后的結果信息。

我們可以使用CSS3來增強頁面效果，使用-webkit-animation動畫效果實現手搖圖片的動態效果，具體請下載源代碼查看。

Javascript

“搖一搖”這個動作即“一定時間內設備了一定距離”，因此通過devicemotion監聽設備晃動獲取到的x, y, z軸的 值在一定時間范圍內的變化率，即判斷設備是否有進行晃動。而為了防止正常移動的誤判，需要給該變化率設置一個合適的臨界值。
HTML5判斷設備晃動的代碼我們使用已經封裝好的shake.js，項目地址：https://github.com/alexgibson/shake.js。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

HTML5使用DeviceOrientation實現搖一搖功能_jquery

HTML5使用DeviceOrientation實現搖一搖功能_jquery:HTML5有一個重要特性：DeviceOrientation，它將底層的方向和運動傳感器進行了高級封裝，它使我們能夠很容易的實現重力感應、指南針等有趣的功能。本文將結合實例給大家介紹使用HTML5的重力運動和方向傳感器實現手機搖一搖效果。 DeviceOrientat

推薦度：

點擊下載本文 文檔為doc格式