HTML5 menggunakan DeviceOrientation untuk melaksanakan shake function_jquery

HTML5 mempunyai ciri penting: DeviceOrientation, yang menyediakan pengkapsulan lanjutan arah asas dan penderia gerakan Ia membolehkan kami melaksanakan fungsi menarik seperti penderiaan graviti dan kompas dengan mudah. Artikel ini akan menggunakan contoh untuk memperkenalkan cara menggunakan penderia gerakan graviti dan arah HTML5 untuk mencapai kesan gegaran telefon anda.

Orientasi Peranti merangkumi dua acara:

1. DeviceOrientation: Peristiwa yang merangkum data penderia orientasi dan boleh mendapatkan data orientasi telefon bimbit apabila ia tidak bergerak, seperti sudut, orientasi, orientasi, dll. telefon mudah alih.
2. deviceMotion: peristiwa yang merangkum data sensor gerakan dan boleh mendapatkan data seperti pecutan gerakan apabila telefon bimbit sedang bergerak.

HTML

Terdapat div#hand pada halaman, yang digunakan untuk meletakkan imej jabat tangan, dan div#result digunakan untuk memaparkan maklumat hasil selepas goncangan.

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

Kami boleh menggunakan CSS3 untuk meningkatkan kesan halaman, dan menggunakan kesan animasi -webkit-animasi untuk mencapai kesan dinamik imej yang diputar dengan tangan Sila muat turun kod sumber untuk melihat butiran.

Javascript

Tindakan "goncang" bermaksud "peranti bergerak pada jarak tertentu dalam tempoh masa tertentu." Oleh itu, kadar perubahan nilai paksi x, y dan z dalam julat masa tertentu yang diperolehi oleh memantau gegaran peranti melalui devicemotion adalah untuk menentukan peranti Adakah terdapat sebarang gegaran? Untuk mengelakkan salah menilai pergerakan normal, nilai kritikal yang sesuai perlu ditetapkan untuk kadar perubahan.
Kami menggunakan kod shake.js terkapsul untuk HTML5 untuk menentukan gegaran peranti, alamat projek: https://github.com/alexgibson/shake.js.

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

Mula-mula nyatakan Shake, kemudian mula memantau pergerakan peranti, memantau pergerakan peranti dan memanggil semula hasil pemantauan: 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); 
  } 
}; 

Di sini, fungsi shakeEventDidOccur() boleh disesuaikan Dalam contoh ini, hasil goncang dikembalikan dan dipaparkan pada halaman.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.