Cet article partagera avec vous les exemples d'opérations d'implémentation sur les contacts similaires à QQ: Swipe à gauche et glissez le bouton Supprimer. S'il glisse plus de la moitié, il glissera automatiquement vers le bas. S'il libère moins de la moitié, il reviendra à sa place d'origine.
Implémentation Pure JS
Utilisez H5 TouchMove et d'autres événements, et utilisez JS pour modifier dynamiquement l'attribut Translate de CSS3 pour réaliser l'effet d'animation:
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <meta name = "Viewport" id = "Viewport" contenu = "width = device-width, initial-scale = 1"> <itle> html5swipe à gauche pour supprimer l'effet spécial </tapie> <style> * {padding: 0; marge: 0; Style de liste: aucun; } En-tête {arrière-plan: # f7483b; Border-Bottom: 1px solide #ccc} En-tête H2 {Text-Align: Centre; hauteur de ligne: 54px; taille de police: 16px; couleur: #fff} .list-ul {overflow: Hidden} .list-li {line-height: 60px; Border-Bottom: 1px solide #fcfcfc; Position: relative; rembourrage: 0 12px; Couleur: # 666; Contexte: # f2f2f2; -Webkit-transform: tradlatex (0px); } .btn {position: absolue; en haut: 0; à droite: -80px; Texte-aligne: Centre; Contexte: # FFCB20; Couleur: #FFF; Width: 80px} </ style> <script> / * * Description: Html5 Apple Phone glisse à gauche pour supprimer les effets spéciaux * / window.addeventListener ('Load', function () {var initx; // touch position var movex; // position var x = 0; // Movement Distance var objx = 0; // cible Position Objective Windows.AdDeventListener ('' touchstart ' event.preventDefault (); var obj = event.target.parentNode; } if (objx == 0) {window.AddeventListener ('TouchMove', fonction (événement) {event.PreventDefault (); var obj = event.target.parentNode; if (obj.classname == "list-li") {movex = event.targetTouches [0]. obj.style.webkitTransform = "Translatex (" + 0 + "px)";} else if (x <0) {var l = math.abs (x); obj.style.webk -l + "px)";}}}}});} else if (objx <0) {window.adDeventListener ('TouchMove' event.targetTouches [0] .Pagex; x = movex - initx; "PX)"; (obj.classname == "list-li") {objx = (obj.style.webkitTransform.replace (/ translatex / (/ g, "") .replace (/ px /), "")) * 1; 0; en bas </div> <div> delete </div> </li> <li> <div> wow, que faites-vous? Venez rapidement et attendez-vous </div> <div> delete </div> </li> </ul> </ section> </ body> </html>Fabriqué dans le plugin Zepto
Dans les projets réels, nous pouvons avoir de nombreux endroits qui utilisent cette fonction. Nous avons maintenant fait de cette fonction un plug-in Zepto pour une utilisation facile plus tard.
Dans ce plugin, nous implémentons uniquement cette fonction, puis passons dans les paramètres (supprimez le nom de style du bouton) pour permettre au programme de calculer la distance nécessaire pour glisser dans JS, ce qui est pratique pour la réutilisation.
zepto.touchwipe.js
/ ** * Zepto Plug-in: Swipe à gauche pour supprimer l'effet d'animation * Méthode d'utilisation: $ ('. Itemwipe'). TouchWipe ({itemDelete: '.Item-Delete'}); * Paramètres: itemDelete le nom de style du bouton de suppression * /; (fonction ($) {$ .fn.touchwipe = function (option) {var defaults = {itemdelete: '.item-delete', // élément delete}; var opts = $ .Extend ({}, défaut, option); // options de configuration var delwidth = $ (opts.itemdelete) .width (); (obj.style.webkittransform.replace (/ translatex / (/ g, "") .replace (/ px /) / g, "")) * 1; MOVEX - IniTX; obj.style.webkitTransform = "tradlatex (" + -l + "px)";}}}); > = 0) {var r = -delwidth + math.abs (x); obj.style.webkitTransform = "translatex (" + -delwidth + "px)";}});}}). ") .replace (/ px) / g," ") * 1; obj.style.transition = "all 0.2s";Touchwipe.html
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <meta name = "Viewport" id = "Viewport" contenu = "width = device-width, initial-scale = 1"> <itle> html5swipe à gauche pour supprimer l'effet spécial </tapie> <style> * {padding: 0; marge: 0; Style de liste: Aucun;} En-tête {Background: # F7483B; Border-Bottom: 1px solide #ccc} En-tête H2 {Text-Align: Centre; hauteur de ligne: 54px; taille de police: 16px; couleur: #fff} .list-ul {overflow: Hidden} .list-li {line-height: 60px; Border-Bottom: 1px solide #fcfcfc; Position: relative; rembourrage: 0 12px; Couleur: # 666; Contexte: # f2f2f2; -Webkit-transform: tradlatex (0px); } .btn {position: absolue; en haut: 0; à droite: -80px; Texte-aligne: Centre; Contexte: # FFCB20; Couleur: #FFF; Largeur: 80px} </ style> </ head> <body> <e-header> <h2> Liste des messages </h2> </-header> <section> <ul> <li id = "li"> <v> Votre livraison express est arrivée, veuillez signer les états </v> <div> delete </ div> </li> <li> <v> wow, que faites-vous? Venez rapidement et attendez-vous </div> <div> delete </div> </li> </ul> </ction> <p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </span> </p> <p> initx: <span id = "initx"> </pan> </p> id = "movex"> </ span> </ p> <script type = "text / javascript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"> </ script> <script type = "text / javascript" src = "zepto.touchwpe type = "text / javascript"> $ (function () {$ ('. list-li'). touchwipe ({itemDelete: '.btn'});}); </cript> </ body> </html>Effet:
Effets des applications dans les projets réels:
Éliminer les bogues
En allant à l'étape ci-dessus, nous réalisons essentiellement les fonctions dont nous avons besoin. Mais il y a plusieurs problèmes :
1. Le clic du bouton Supprimer à droite échoue car la portée ne peut pas bouillonner sur le gros bouton;
2. Un problème très grave. Nous avons ajouté un événement TouchMove à la div et bloqué l'événement du navigateur d'origine avec EmptiserDefault (), ce qui n'a pas pu faire défiler la page en glissant de haut en bas de la div!
Le premier problème est plus facile à résoudre. Nous supprimons directement la portée et écrivons "Supprimer" dans CSS: avant, comme ceci:
.itemwipe .item-delete: avant {contenu: 'supprimer'; couleur: #fff;}Pour le deuxième problème, il est dit qu'il est de la résoudre en ligne. Ici, nous nous référons au fonctionnement glissant des contacts dans le QQ mobile.
Principe général: Au début du glissement, déterminez si l'axe y se déplace davantage ou que l'axe x se déplace davantage. Si l'axe x se déplace en grand, il est jugé comme une opération de suppression coulissante, et nous utiliserons EmptiserDefault ();
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.