HTML5 Single Page Gesture Geser Layar Analisis Prinsip

Sakelar layar Single -Page Gesture diimplementasikan menggunakan acara sentuh HTML5 (Touch) dan CSS3 Animation (Transition).

Dengan asumsi bahwa ada 5 halaman, setiap halaman menyumbang layar lebar 100%, kemudian buat viewport kontainer div, atur lebarnya (lebar) menjadi 500%, kemudian masukkan 5 halaman ke dalam wadah, dan biarkan 5 halaman ini membagi 5 halaman ini Seluruh wadah, akhirnya atur posisi default wadah ke 0, dan meluap ke tersembunyi, sehingga layar menampilkan halaman pertama secara default.

 <Div id = viewport class = viewport> <div class = pageView style = latar belakang: #3b76c0> <h3> halaman -1 </h3> </div> <div class = pageView = backggggggggggggg: #58c03b;> <h3 > Page -2 </h3> </div> <div class = pageView style = latar belakang: #c03b25;> <h3> halaman -3 </h3> </div> <div class = pageView style = latar belakang: #e0a77777777777 18;> <h3> halaman -4 </h3> </div> <div class = pageView style = latar belakang: #c03eac;> <h3> halaman -5 </h3> </div> </div>

Gaya CSS:

 .Viewport {Width: 500%; Acara klik, harap dicatat -webkit-transform: translate3d (0,0,0);

Daftarkan TouchStart, TouchMove dan Touchend Incident. , 0) dari Viewport (100%, 0,0).

Dari jari di layar, operasi geser, dan meninggalkan layar adalah proses operasi yang lengkap.

Letakkan jari Anda di layar: Ontouchstart

Geser jari Anda di layar: Ontouchmove

Jari meninggalkan layar: Ontouchend

Kita perlu menangkap tiga tahap insiden menyentuh ini untuk menyelesaikan geser halaman:

OnTouchStart: Variabel yang Diinisialisasi, Catat Lokasi Jari, Catat Waktu Saat Ini

 /*Taruh jari Anda di layar*/document.addeventRistener (touchstart, function (e) {e.preventDefault (); var touch = e.touchs [0]; startx = touch.pagex; starty touch.pagey; initialpos = Currentposition;

OnTouchMove: Dapatkan lokasi saat ini, hitung Deltax Perbedaan Bergerak di layar, dan kemudian buat halaman Ikuti Pindah

 /*Geser jari Anda ke layar, dan halaman mengikuti jari untuk memindahkan*/document.addeventristener (touchmove, function (e) {e.preventdefault (); var touch = e.touchs [0]; var deltax = sentuh .P Agex -Startx; Var Deltay = Touch.Pagey -Starty; Math.abs (deltay) {movelength = deltax; 0 && Translate> = MaxWidth) {// Mobile Page this.transform.call (viewport, translate); ini), salah);

OnTouchend: Ketika jari Anda meninggalkan layar, halaman dihitung halaman mana yang akhirnya tetap ada. Pertama, hitung waktu menginap di layar Deltat.

Jika meluncur cepat, biarkan halaman saat ini tetap di tengah layar (berapa banyak yang Anda butuhkan untuk menggeser halaman saat ini)

Jika perlahan -lahan meluncur, Anda juga perlu menilai jarak geser jari Anda di layar. di halaman saat ini

 /*Saat jari meninggalkan layar, hitung halaman mana yang Anda butuhkan untuk tetap di akhir*/document.addeventristener (touchind, function (e) {e.preventdefault (); var terjemahan = 0; // Hitung waktu dari jari di layar. S Ease -WebKit -Transform; if (deltat <300) {// Jika waktu menginap kurang dari 300ms, itu dianggap cepat meluncur +Panjang pagewidth; {// Jika jarak geser kurang dari 50 %dari layar, kembali ke halaman sebelumnya jika (math.abs (moveLength)/pagewidth <0,5) {translate = atrrentposity-movelength; %, jika Anda meluncur ke halaman berikutnya Translate == 'Left'? sepenuhnya pada layar this.transform.call (viewport, translate);}}.

Selain itu, Anda perlu menghitung halaman saat ini adalah halaman, dan mengatur nomor halaman saat ini

 // Hitung nomor halaman saat ini pagenow = math.round (math.abs (translate)/pagewidth) + 1; Gagasan ini akan muncul.

Ini adalah ide -ide dasar. https://github.com/git -onepixel/Guesture

Di atas adalah analisis prinsip prinsip switching layar single -page html5 yang diperkenalkan oleh Xiaobian. waktu. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!