Diagram reproduksi
Langkah 1: Memuat
<Script src = "js/jQuery.min.js"> </script> <skrip src = "js/jquery.mobile-1.3.2.min.js"> </script>
Langkah 2: HTML
<div> <div> <img src="images/icon.png"> </div> <div> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> <p> Minions</p> </div> <i></i> <a>Delete</a> </div> <div> <div> <img src = "gambar/ikon.png"> </div> <v> <p> Minion </p> <p> Minion </p> <p> Minion </p> <p> Minion </p> <p> Minion </p> </Div> <i> </i> <a> Delete </a> </Div> </Div> <i> </i> <a>
Langkah 2: CSS
.item-wrap {overflow: tersembunyi; } .item-wrap .item {border-bottom: 1px #ff solid; Latar belakang: #000; Lebar: 125%; meluap: tersembunyi; Posisi: kerabat; Tampilan: -webkit -box; -webkit-transisi: semua 0,3S linear; } .item-wrap .item .img-item {lebar: 50px; Tinggi: 50px; margin: 10px; } .item-wrap .item .img-item img {width: 100%; Border-Radius: 50%; } .item-wrap .item .txt-item {padding-top: 10px; margin-kanan: 25px; Ukuran font: 14px; Line-Height: 24px; Warna: #fff; -webkit-box-flex: 1; } .item-wrap .item .arrow {width: 0; Tinggi: 0; Line-Height: 0; Ukuran font: 0; Gaya perbatasan: solid; Color perbatasan: transparan transparan transparan #FFF; Batas-lebar: 8px 0px 8px 8px; Posisi: Absolute; Kanan: 22%; Atas: 50%; margin-top: -8px;}. delect-btn {lebar: 20%; margin-kiri: 15px; Warna: #fff; Latar Belakang: #0F0; z-index: 999; Tampilan: Blok; Teks-Align: tengah; padding-top: 5%;}. Item-wrap .Seleksi {-webkit-transform: translate (-16%); -webkit-transisi: semua 0,3S linear;}Langkah 2: JQ
<script> $ (". item"). on ('swipeleft', function (event) {event.preventDefault (); / * bertindak pada acara * / $ (this) .addclass ('dipilih'). event ('. Event.preventDefault (); $ (". item"). on ('swiperight', function (event) {event.preventDefault ();/ * bertindak pada acara */$ (this) .removeclass ('dipilih');}); </script>Artikel di atas JQ mewujudkan swipe kiri untuk menampilkan tombol hapus, klik untuk menghapus untuk mewujudkan fungsi data hapus (disarankan) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.