欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5使用DeviceOrientation實現(xiàn)搖一搖功能

 更新時間:2015年06月05日 10:17:18   投稿:hebedich  
這篇文章主要介紹了HTML5使用DeviceOrientation實現(xiàn)搖一搖功能的相關資料,需要的朋友可以參考下

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

DeviceOrientation包括兩個事件:

1、deviceOrientation:封裝了方向傳感器數(shù)據(jù)的事件,可以獲取手機靜止狀態(tài)下的方向數(shù)據(jù),例如手機所處角度、方位、朝向等。
2、deviceMotion:封裝了運動傳感器數(shù)據(jù)的事件,可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。

HTML

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

<div id="hand" class="hand hand-animate"></div> 
<div id="result"></div> 

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

Javascript

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

<script src="shake.js"></script> 

首先實例化Shake,然后啟動開始監(jiān)聽設備運動情況,監(jiān)聽設備運動,回調監(jiān)聽結果:shakeEventDidOccur。

window.onload = function() { 
  var myShakeEvent = new Shake({ 
    threshold: 15 
  }); 
 
  myShakeEvent.start(); 
 
  window.addEventListener('shake', shakeEventDidOccur, false); 
 
  function shakeEventDidOccur () { 
    var result = document.getElementById("result"); 
    result.className = "result"; 
    var arr = ['妹子一枚','福利圖片一套','碼農筆記一本','土豪金一臺']; 
    var num = Math.floor(Math.random()*4); 
    result.innerHTML = "恭喜,搖得"+arr[num]+"!"; 
    setTimeout(function(){ 
      result.className = "result result-show"; 
    }, 1000); 
  } 
}; 

這里,函數(shù)shakeEventDidOccur()可以自定義,本例是將搖晃后的結果返回在頁面上展示出來,請看DEMO演示。

以上所述就是本文的全部內容了,希望大家能夠喜歡。

相關文章

最新評論