Diagramme de reproduction
Étape 1: Chargement
<script src = "js / jquery.min.js"> </ script> <script src = "js / jquery.mobile-1.3.2.min.js"> </cript>
Étape 2: HTML
<div> <div> <img src = "images / icon.png"> </ div> <v> <p> Minions </p> <p> Minions </p> <p> Minions </p> <p> Minions </p> <p> Minions </p> </div> <i> </i> <a> Delete </a> </v> </v> <i> </i> <a> Delete </a> </v> <v> 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> </v> </div> <i> </i> <a>
Étape 2: CSS
.Item-wrap {Overflow: Hidden; } .item-wrap .item {border-bottom: 1px #ff solide; Contexte: # 000; Largeur: 125%; débordement: caché; Position: relative; Affichage: -webkit-box; -Webkit-Transition: Tous 0,3S linéaire; } .item-wrap .Item .img-item {width: 50px; hauteur: 50px; marge: 10px; } .item-wrap .item .img-item img {width: 100%; Border-Radius: 50%; } .item-wrap .Item .txt-item {padding-top: 10px; marge droite: 25px; taille de police: 14px; hauteur de ligne: 24px; Couleur: #FFF; -Webkit-box-flex: 1; } .item-wrap .item .arrow {width: 0; hauteur: 0; hauteur de ligne: 0; taille de police: 0; Style de la frontière: solide; Color à la frontière: transparent transparent transparent #FFF; largeur de bordure: 8px 0px 8px 8px; Position: absolue; À droite: 22%; en haut: 50%; marge-top: -8px;}. Delect-btn {width: 20%; marge-gauche: 15px; Couleur: #FFF; Contexte: # 0f0; Z-Index: 999; Affichage: bloc; Texte-aligne: Centre; padding-top: 5%;}. item-wrap .selected {-webkit-transform: tradlate (-16%); -Webkit-Transition: Tous 0,3S linéaire;}Étape 2: JQ
<script> $ (". item"). sur ('swipeleft', fonction (événement) {event.preventDefault (); / * agir sur l'événement * / $ (this) .adddclass ('selected'). sifllings ('. event.preventDefault (); / * agir sur l'événement * / $ (this) .parent (". $ (". item"). sur ('swipeRight', fonction (événement) {event.preventDefault (); / * agir sur l'événement * / $ (this) .removeclass ('sélectionné');}); </ script>L'article ci-dessus JQ réalise le balayage gauche pour afficher le bouton Supprimer, cliquez pour supprimer pour réaliser que la fonction de données de suppression (recommandée) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.