Rumah >hujung hadapan web >Tutorial H5 >HTML5 DeviceOrientation melaksanakan kod fungsi goncang tapak web mudah alih example_html5 kemahiran tutorial
HTML5 DeviceOrientation melaksanakan kod fungsi goncang tapak web mudah alih example_html5 kemahiran tutorial
- WBOYasal
- 2016-05-16 15:46:501313semak imbas
Buat dua kenyataan sebelum pengenalan:
Kod berikut boleh dijalankan secara langsung, jangan lupa untuk memetik jQuery.
// DeviceOrientation menyediakan enkapsulasi peringkat tinggi bagi penderia arah dan penderia gerakan asas, memberikan sokongan untuk acara DOM.
// Ciri ini termasuk dua acara:
// 1. deviceOrientation: peristiwa yang merangkum data penderia orientasi, yang boleh mendapatkan data orientasi telefon bimbit apabila ia tidak bergerak (sudut, orientasi dan orientasi telefon bimbit, dsb.) .
// 2. deviceMotion: Merangkum peristiwa penderia gerakan dan boleh mendapatkan data seperti pecutan gerakan apabila telefon bimbit sedang bergerak.
// Menggunakan dua acara ini, anda boleh melaksanakan fungsi menarik seperti penderiaan graviti dan kompas dengan mudah.
// Kini terdapat fungsi yang sangat biasa dan bergaya dalam banyak aplikasi Asli - goncang untuk mencari orang, goncang untuk membaca berita, goncang untuk mencari syiling emas. . .
// Mungkin anda sudah mengetahui fungsi ini dengan baik pada klien android atau ios, tetapi sekarang, saya akan memberitahu anda bagaimana untuk melaksanakan fungsi goncang pada halaman web mudah alih.
// OK, mari mulakan sekarang, hehe~
// Mari kita fahami peristiwa gerakan peranti dahulu——DeviceMotionEvent: Mengembalikan maklumat berkaitan tentang pecutan dan putaran peranti, di mana data pecutan termasuk Tiga berikut arah:
// x: melintang merentasi skrin telefon;
// y: menegak merentasi skrin telefon;
// Memandangkan sesetengah peranti tidak mengecualikan pengaruh graviti, peristiwa ini akan mengembalikan dua sifat:
// 1. pecutanTermasukGraviti (pecutan termasuk graviti)
// 2. pecutan ( tidak termasuk pengaruh graviti) Pecutan)
// Sebagai pengekod, cara yang paling langsung adalah dengan mengekod.
//Pertama, dengar peristiwa pengesan gerakan pada halaman
fungsi init(){
jika (tetingkap.DeviceMotionEvent) {
// Pelayar mudah alih menyokong peristiwa penderiaan gerakan
tetingkap. addEventListener('devicemotion', deviceMotionHandler, false);
$("#yaoyiyaoyes").show();
} else{
// Penyemak imbas mudah alih tidak menyokong acara penderiaan gerakan
( $ "#yaoyiyaono").show();
}
}
// Jadi, bagaimana kita mengira sama ada pengguna menggoncang telefon? Anda boleh mempertimbangkan perkara berikut:
// 1. Malah, apabila pengguna menggoncang telefon mereka, mereka sentiasa bergegar ke satu arah
// 2. Apabila pengguna menggoncang telefon mereka, mereka bergerak dalam x, Akan ada menjadi perubahan yang sepadan dalam kelajuan dalam tiga arah y dan z
// 3. Tingkah laku pergerakan telefon mudah alih biasa pengguna tidak boleh dianggap sebagai bergegar (telefon diletakkan di dalam poket, dan pecutan juga akan berubah apabila berjalan kaki)).
// Mengambil kira tiga titik di atas, hitung pecutan dalam tiga arah, ukurnya pada selang waktu, periksa kadar perubahannya dalam tempoh masa yang tetap, dan tentukan ambang untuk mencetuskan operasi selepas goncangan.
// Mula-mula, tentukan ambang gegaran
var SHAKE_THRESHOLD = 3000;
// Tentukan pembolehubah untuk menjimatkan masa kemas kini terakhir
var last_update = 0;
// Ketat Kemudian takrifkan x, y, z untuk merekodkan data bagi tiga paksi dan masa berlepas terakhir
var x;
var y;
var z;
var last_x;
var last_y;
var last_z;
//Untuk menjadikan contoh ini lebih membosankan dan menarik, tambahkan pembilang
var count = 0;
function deviceMotionHandler(eventData) {
// Dapatkan pecutan termasuk graviti
var acceleration = eventData.accelerationIncludingGravity;
// Dapatkan masa semasa
var curTime = new Date().getTime();
var diffTime = curTime -last_update;
// Tempoh masa tetap
jika (diffTime > ; 100) {
last_update = curTime
x = pecutan.x;
var kelajuan = Math.abs(x y z - last_x - last_y - last_z) / diffTime * 10000;
if (kelajuan > SHAKE_THRESHOLD) {
// TODO: Di sini anda boleh melaksanakan operasi logik data yang akan dilakukan selepas menggoncang
Count ;
$("#yaoyiyaoyes ("). );
}
last_x = x;
last_y = y;
last_z = z; Saudara, jika anda melihat saya, itu bermakna anda belum boleh menggegarkannya, tetapi ini tidak bermakna anda tidak layak untuk menggunakan saya, sebaliknya:
1. Jika anda menggunakan penyemak imbas PC, itu salah Saya hanya suka pelayar mudah alih
2. Jika anda menggunakan telefon Android, saya minta maaf untuk memberitahu anda bahawa Android disertakan dengan penyemak imbas. meninggalkan saya, anda boleh menggunakan penyemak imbas pihak ketiga seperti UCWeb dan chrome; telefon! ! !