Este artículo compartirá con usted los ejemplos de implementación de operaciones en contactos similares a QQ: deslizar a la izquierda y deslizar el botón Eliminar. Si se desliza más de la mitad, se deslizará automáticamente hacia la parte inferior. Si libera menos de la mitad, volverá a su lugar original.
Implementación de JS puro
Use H5 Touchmove y otros eventos, y use JS para cambiar dinámicamente el atributo Traducir de CSS3 para lograr el efecto de animación:
<! DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = dispositivo-width, escala inicial = 1"> <title> html5swipe izquierda para eliminar el efecto especial </title> <syle> * {Padding: 0; margen: 0; Estilo de lista: Ninguno; } encabezado {fondo: #f7483b; Border-Bottom: 1px Solid #CCC} Header H2 {Text-Align: Center; Línea de altura: 54px; tamaño de fuente: 16px; color: #fff} .list-ul {desbordamiento: oculto} .list-li {line-height: 60px; Border-Bottom: 1px Solid #FCFCFC; Posición: relativo; relleno: 0 12px; Color: #666; Antecedentes: #F2F2F2; -webkit-transform: traduceX (0px); } .btn {posición: absoluto; arriba: 0; Derecha: -80px; Text-Align: Center; Antecedentes: #FFCB20; Color: #fff; Ancho: 80px} </style> <script>/** Descripción: Html5 Apple Phone se desliza a la izquierda para eliminar los efectos especiales*/window.addeventListener ('load', function () {var initx; // touch position var mudx; // posición var x = 0; // distancia de movimiento var objx = 0;//position window.addeventsistener ('' ',' touchstart) {event event {event) toattart ', touchstart', touchstar. event.preventDefault (); * 1. {obj.style.webkittransform = "traduceX (" + 0 + "px)"; + "px)";}}}}}); X = Movex - initx; obj.style.webkittransform = "traduceX (" + -80 + "px)"; objx = (obj.style.webkittransform.replace (/traducex/(/g, ""). obj.style.webkittransform = "traduceX (" + -80 + "px)"; objx = -80; <div> delete </div> </li> <li> <div> wow, ¿qué estás haciendo? Ven rápidamente y esperas </div> <iv> Eliminar </div> </li> </ul> </section> </body> </html>Hecho en el complemento Zepto
En proyectos reales, podemos tener muchos lugares que usan esta función. Ahora hemos hecho esta función en un complemento Zepto para facilitar su uso más adelante.
En este complemento, solo implementamos esta función y luego pasamos los parámetros (elimine el nombre del estilo del botón) para permitir que el programa calcule la distancia necesaria para deslizarse en JS, lo cual es conveniente para la reutilización.
Zepto.Touchwipe.js
/*** Plug-in Zepto: deslizar a la izquierda para eliminar el efecto de animación* Método de uso: $ ('. itemwipe'). TouchWipe ({itemDelete: '.Item-delete'}); * Parámetros: itemDelete El nombre de estilo del botón Eliminar*/; (function ($) {$ .fn.Touchwipe = function (opción) {var defaults = {itemDelete: '.Item-Delete', // Elemento}; var opts = $ .extend ({}, predeterminado, opción de opción); // de configuración Var delwidth = = = = = = = = = = = = = = = $ (Opts.ItemDelete) .Width (); (obj.style.webkittransform.replace (/traducex/(/g, ") .replace (/px/)/g," ")) * 1; event.tarGetTouches [0] .pagex; DelWidth) {l = DelWidth; Event.TarGetTouches [0] .Pagex; "Px)"; (obj.style.webkittransform.replace (/traducex/(/g, ") .replace (/px/)/g," ")) * 1; obj.Style.Transition = "Todo 0"; };}) (Zepto);touchwipe.html
<! DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = dispositivo-width, escala inicial = 1"> <title> html5swipe izquierda para eliminar el efecto especial </title> <syle> *{Padding: 0; margen: 0; estilo list: none;} encabezado {fondo: #f7483b; Border-Bottom: 1px Solid #CCC} Header H2 {Text-Align: Center; Línea de altura: 54px; tamaño de fuente: 16px; color: #fff} .list-ul {desbordamiento: oculto} .list-li {line-height: 60px; Border-Bottom: 1px Solid #FCFCFC; Posición: relativo; relleno: 0 12px; Color: #666; Antecedentes: #F2F2F2; -webkit-transform: traduceX (0px); } .btn {posición: absoluto; arriba: 0; Derecha: -80px; Text-Align: Center; Antecedentes: #FFCB20; Color: #fff; Ancho: 80px} </style> </head> <body> <curebel> <h2> Lista de mensajes </h2> </header> <section> <ul> <li id = "li"> <div> su entrega expresa ha llegado, por favor, firme las escaleras </div> <div> delete </div> </li> <li> <div> wow, ¿qué está haciendo? Ven rápidamente y espere </div> <iv> Eliminar </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> Movex: <span> 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.touchWipe.js"></script><script type = "text/javaScript"> $ (function () {$ ('. list-li'). TouchWipe ({itemDelete: '.Btn'});}); </script> </body> </html>Efecto:
Efectos de la aplicación en proyectos reales:
Eliminar errores
Al ir al paso anterior, básicamente nos damos cuenta de las funciones que necesitamos. Pero hay varios problemas :
1. El clic del botón Eliminar a la derecha falla porque el tramo no puede burbujear sobre el botón grande;
2. Un problema muy grave. ¡Agregamos un evento Touchmove al DIV y bloqueamos el evento del navegador original con PreventDefault (), lo que hizo que la página no pudiera desplazarse al deslizarse hacia arriba y hacia abajo del DIV!
El primer problema es más fácil de resolver. Eliminamos el tramo directamente y escribimos "eliminar" en CSS: antes, así:
.Itemwipe .Item-delete: antes {contenido: 'eliminar'; Color: #fff;}Para el segundo problema, se dice que se trata de resolverlo en línea. Aquí nos referimos a la operación deslizante de contactos en QQ móvil.
Principio general: al comienzo de la deslizamiento, determine si el eje Y se mueve más o el eje X se mueve más. Si el eje x se mueve grande, se juzga como una operación de deleción deslizante, y utilizaremos PreventDefault ();
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.