Artikel ini akan membagikan kepada Anda contoh -contoh operasi implementasi pada kontak yang mirip dengan QQ: Gesek ke kiri dan geser keluar tombol Hapus. Jika meluncur lebih dari setengahnya, itu akan secara otomatis meluncur ke bawah. Jika melepaskan kurang dari setengahnya, ia akan kembali ke tempat aslinya.
Implementasi JS murni
Gunakan H5 TouchMove dan acara lainnya, dan gunakan JS untuk secara dinamis mengubah atribut terjemahan CSS3 untuk mencapai efek animasi:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width, initial-scale = 1"> <title> htmlSwipe kiri untuk menghapus efek khusus </title> <style> {pad 0; Margin: 0; List-style: tidak ada; } header {latar belakang: #f7483b; Border-Bottom: 1px solid #ccc} header h2 {text-align: center; Line-Height: 54px; font-size: 16px; warna: #fff} .list-ul {overflow: tersembunyi} .list-li {line-height: 60px; Border-Bottom: 1px solid #fcfcfc; Posisi: kerabat; padding: 0 12px; Warna: #666; Latar Belakang: #F2F2F2; -webkit-transform: translatex (0px); } .btn {position: absolute; TOP: 0; Kanan: -80px; Teks-Align: tengah; Latar Belakang: #FFCB20; Warna: #fff; Lebar: 80px} </style> <script>/** Deskripsi: html5 Apple ponsel gesekan kiri untuk menghapus efek khusus*/window.addeventlistener ('load', function () {var initx; // posisi sentuh {posisi posisi var x = 0; // Gerakan jarak var objx = 0; // Posisi var posisi; event.preventdefault (); var obj = event.target.parentnode; "")) * 1;} if (objx == 0) {window.addeventListener ('touchmove', function (event) {event.preventdefault (); var obj = event.target.parentNode; if (obj.classname == "daftar -li") {pindahkan = event.targx; > 0) {obj.style.webkittransform = "translatex (" + 0 + "px)"; "Translatex (" + -l + "px)"; Event.TargetTouches [0] .PAGEX; "PX); ; objx = 0;} else {obj.style.webkittransform = "translatex (" + -80 + "px)" Downstairs </div> <div> delete </div> </li> <li> <div> wow, apa yang kamu lakukan? Datang dengan cepat dan tunggu Anda </div> <div> delete </div> </li> </ul> </section> </body> </html>Dibuat ke plugin Zepto
Dalam proyek aktual, kami mungkin memiliki banyak tempat yang menggunakan fungsi ini. Sekarang kami telah membuat fungsi ini menjadi plug-in Zepto agar mudah digunakan nanti.
Di plugin ini, kami hanya menerapkan fungsi ini, dan kemudian lulus dalam parameter (hapus nama gaya tombol) untuk memungkinkan program menghitung jarak yang diperlukan untuk meluncur di JS, yang nyaman untuk digunakan kembali.
zepto.touchwipe.js
/*** Plug-in Zepto: Geser Kiri untuk Menghapus Efek Animasi* Metode Penggunaan: $ ('. ItemWipe'). TouchWipe ({ItemDelete: '.item-delete'}); * Parameter: ItemDelete Nama gaya tombol Hapus*/; (fungsi ($) {$ .fn.touchwipe = function (opsi) {var defaults = {itemDelete: '.item-delete', // hapus elemen}; var opts = $ .extend ({}, opsi, // opsi); $ Opts.itemdelete) .width (); (obj.style.webkittransform.replace (/translatex/(/g, "") .replace (/px/)/g, "")) * 1; Event.TargetTouches [0] .PAGEX; (l> delwidth) {l = delwidth; Event.TargetTouches [0] .pagex; "px)"; (obj.style.webkittransform.replace (/translatex/(/g, "") .replace (/px/)/g, "") * 1; "PX); // rantai kembali ini;};}) (zepto);Touchwipe.html
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = device-width, initial-scale = 1"> <title> htmlSwipe kiri untuk menghapus efek khusus </title> <style> {pad 0; Margin: 0; List-style: none;} header {latar belakang: #f7483b; Border-Bottom: 1px solid #ccc} header h2 {text-align: center; Line-Height: 54px; font-size: 16px; warna: #fff} .list-ul {overflow: tersembunyi} .list-li {line-height: 60px; Border-Bottom: 1px solid #fcfcfc; Posisi: kerabat; padding: 0 12px; Warna: #666; Latar Belakang: #F2F2F2; -webkit-transform: translatex (0px); } .btn {position: absolute; TOP: 0; Kanan: -80px; Teks-Align: tengah; Latar Belakang: #FFCB20; Warna: #fff; width: 80px}</style></head><body><header> <h2>Message List</h2></header><section> <ul> <li id="li"> <div> Your express delivery has arrived, please sign downstairs</div> <div> Delete</div> </li> <li> <div> Wow, what are you doing? Datang dengan cepat dan tunggu Anda </div> <div> delete </div> </li> </ul> </section> <p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </span> <p> <p> initx: <span id = "initx"> </span> <p> <p> initx: <span id = "initx"> </span> <p> <p> initx: <span id = "initx"> </span> <p> <p> initx: <span id = "initx"> id = "movex"> </span> </p> <script type = "text/javascript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"> </script> <script = "teks/javascript" scripto.min.js "> type = "text/javascript"> $ (function () {$ ('. List-li'). TouchWipe ({itemDelete: '.btn'});}); </script> </body> </html>Memengaruhi:
Efek aplikasi dalam proyek aktual:
Menghilangkan bug
Pergi ke langkah di atas, kami pada dasarnya menyadari fungsi yang kami butuhkan. Tapi ada beberapa masalah :
1. Klik tombol Hapus di sebelah kanan gagal karena rentang tidak dapat menggelembung ke tombol besar;
2. Masalah yang sangat serius. Kami menambahkan acara TouchMove ke div dan memblokir acara browser asli dengan preventDefault (), yang menyebabkan halaman tidak dapat menggulir saat meluncur ke atas dan ke bawah div!
Masalah pertama lebih mudah dipecahkan. Kami menghapus rentang secara langsung dan menulis "Hapus" ke CSS: Sebelumnya, seperti ini:
.itemwipe .item-delete: sebelum {konten: 'hapus'; Warna: #fff;}Untuk masalah kedua, dikatakan bahwa itu tidak dapat diselesaikan secara online. Di sini kami merujuk pada operasi geser kontak di qq seluler.
Prinsip Umum: Pada awal geser, tentukan apakah sumbu y lebih banyak bergerak atau sumbu x bergerak lebih banyak. Jika sumbu x bergerak besar, itu dinilai sebagai operasi penghapusan geser, dan kami akan menggunakan preventdefault ();
Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.