Analisis Metode Implementasi Rolling dan Inersia Esing di JS+HTML5 Ponsel Pengembangan Ponsel

Artikel ini menjelaskan metode implementasi penggulingan dan pelonggaran inersia untuk pengembangan ponsel JS+HTML5. Bagikan untuk referensi Anda, sebagai berikut:

1. Gulir tiga metode implementasi berikut:

1) Gunakan atribut CSS asli meluap: gulir div id = gaya induk = overflow: gulir; Divid = Area Konten 'Konten' /Div /Div Pemberitahuan: Ada bug di Android, dan itu akan kembali ke area konten atas setelah menggulir. Solusinya adalah dengan menggunakan dua metode terakhir untuk mengimplementasikannya.

2) Ide Implementasi Pemrograman JS: Bandingkan perubahan posisi bagian depan dan belakang jari di layar untuk mengubah konten elemen konten

1. Gulir

Berikut adalah tiga metode implementasi:

1) Gunakan atribut CSS asli overflow: gulir

 <Div id = "Parent" style = "overflow: gulir;> <div id = 'content'> area konten </div> </div>

Melihat:

Ada bug di Android, dan setelah menggulir, itu akan kembali ke area konten teratas. Solusinya adalah dengan menggunakan dua metode terakhir untuk mengimplementasikannya

2) Implementasi Pemrograman JS

Ide: Bandingkan posisi elemen konten sebelum dan sesudah jari bergerak di layar

Langkah 1: atur overflow orang tua ke tersembunyi, atur posisi konten ke relatif, dan top ke 0;

Langkah 2: Dengarkan Acara Sentuh

 var parent = document.getElementById('parent');parent.addEventListener('touchstart', function(e) { // do touchstart});parent.addEventListener('touchmove', function(e) { // do touchmove});parent.addEventListener('touchend', function(e) { // do Touchend}); Parent.addeventListener ('Touchend', function (e) {// do Touchend});

Langkah 3: Menerapkan kode gulir

 /*** Hanya pengguliran vertikal yang diimplementasikan di sini*/var parent = document.geteLementById ('parent'); var content = document.geteLementById ('content') var starty = 0; // posisi awal var lasty = 0; // posisi terakhir parent.addeventListener ('touchstart', function (e) {lasty = starty = e.touches [0] .pagey;}); parent.addeventListener ('touchmove', function (e) {var nowy = e.touches [0] .pagey; var movy = nowy - nowy -content; content.style.top.replace ('px', ''); // Atur nilai teratas untuk memindahkan konten konten.style.top = (parseInt (contenttop) + movey) + 'px'; - Lasty; var contenttop = content.style.top.replace ('px', '');

Langkah 4: Optimalisasi

Kode di atas berjalan di ponsel dan memiliki banyak hasil macet.

Untuk optimasi, silakan lihat:

3) Gunakan kerangka kerja IsCroll4

 var scroll = new isCroll ('parent', {hscrollbar: false, vscrollbar: true, checkdomchanges: true});

Situs Resmi Kerangka Kerja: http://cubiq.org/iscroll-4

2. Pelonggaran inersia

Ide: Ambil kecepatan rata -rata V dari jari yang menggesek di layar selama periode waktu terakhir, dan biarkan V berubah sesuai dengan fungsi penurunan sampai tidak dapat bergerak atau v <= 0

 /*** Hanya pengguliran vertikal yang diimplementasikan di sini*/var parent = document.geteLementById ('parent'); var content = document.geteLementById ('content') var starty = 0; // posisi awal var lasty = 0; // posisi terakhir/*** variabel untuk pelonggaran*/var lastmoVetime = 0; var lastmovestart = 0; var stopinertiamove = false; // apakah akan berhenti memudahkan parent.addeventListener ('touchStart', function (e) {lasty = starty = e.touches [0] .pagey;/ *** Easing code*/ lastmovestart = lasty; lastmoVetime = e.timestamp || date.now.now (); stopinerTiamove = true;}} parentener. Var Nowy = E. Date.now (); Content.style.top.replace ('px', ''); LastMoVetime); // Periode terakhir dari waktu stroke stopinerTiamove = false; (v, starttime, contenty) {var dir = v> 0? -1: 1; // arah akselerasi var deseleration = Dir * 0.000; Durasi var = v /deseleration; ifeTinerTiamove) var sekarang = E.Timestamp || setTimeout (inertiamove, 10);} inertiamove ();

PS: Berikut adalah beberapa alat pemformatan dan kecantikan kode untuk Anda. Saya yakin Anda akan menggunakannya dalam proses pengembangan di masa depan:

Alat Keindahan dan Pemformatan Kode JavaScript Online:

http://tools.vevb.com/code/js

Alat kompresi/format/enkripsi JavaScript:

http://tools.vevb.com/code/jscompress

JSON Code Online Formatting/Keindahan/Kompresi/Pengeditan/Konversi Alat:

http://tools.vevb.com/code/jsoncodeformat

Verifikasi kode JSON online, inspeksi, kecantikan dan alat pemformatan:

http://tools.vevb.com/code/json

For more information about jQuery, please visit this site's special topics: "Summary of common plug-ins and usages of jQuery", "Summary of Ajax usage in jquery", "Summary of jQuery table (table) operation skills", "Summary of jQuery drag and drop effects and techniques", "Summary of jQuery extension skills", "Summary of common classic special effects of jQuery", "Summary of jQuery animation and special Efek Penggunaan "dan" Ringkasan Penggunaan Pemilih JQuery "

Saya harap artikel ini akan membantu pemrograman jQuery semua orang.