Este artigo compartilhará com você os exemplos de operações de implementação em contatos semelhantes ao QQ: deslize para a esquerda e deslize para fora do botão Excluir. Se deslizar mais da metade, deslizará automaticamente para a parte inferior. Se liberar menos da metade, retornará ao seu local original.
Implementação pura do JS
Use o H5 Touchmove e outros eventos e use o JS para alterar dinamicamente o atributo tradutor do CSS3 para obter efeito de animação:
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = width de dispositivo, escala inicial = 1"> <title> html5swipe esquerdo para delete o efeito </styless> margem: 0; estilo de lista: nenhum; } cabeçalho {Background: #f7483b; Bottom de borda: 1px Solid #ccc} cabeçalho H2 {Text-align: Center; altura da linha: 54px; Size da fonte: 16px; Cor: #FFF} .List-ul {Overflow: Hidden} .List-Li {Linha-altura: 60px; fundo de borda: 1px Solid #fcfcfc; Posição: relativa; preenchimento: 0 12px; Cor: #666; Antecedentes: #f2f2f2; -webkit-transform: translatex (0px); } .btn {posição: absoluto; topo: 0; Direita: -80px; Alinhamento de texto: centro; Antecedentes: #ffcb20; Cor: #FFF; largura: 80px} </style> <cript>/** Descrição: html5 shipes de telefone de maçã deixado para excluir os efeitos especiais*/window.addeventListener ('load', function () {var initx; // Touch Position Object Event.PreventDefault (); 1; obj.style.webkittransform = "translatex (" + 0 + "px)"; "TRANSTOREX (" + -L + "PX)"; Event.TargetTouchs [0] .Pagex; "PX)"; (obj.className == "list -li") {objx = (obj.style.webkittransform.replace (/transllatex/(/g, "") .replace (/px/)/g, "") * 1; objx = 0; Inscreva as escadas </div> <div> excluir </div> </li> <li> <div> uau, o que você está fazendo? Venha rapidamente e espere por você </div> <div> delete </div> </li>Transformado no plugin zepto
Em projetos reais, podemos ter muitos lugares que usam essa função. Agora, transformamos essa função em um plug-in zepto para facilitar o uso posterior.
Neste plug -in, implementamos apenas essa função e passamos em parâmetros (excluímos o nome do estilo do botão) para permitir que o programa calcule a distância necessária para deslizar no JS, o que é conveniente para reutilização.
zepto.Touchwipe.JS
/*** plug-in zepto: deslize para a esquerda para excluir o efeito de animação* Método de uso: $ ('. ItemWipe'). TouchWipe ({itemDelete: '.Item-diete'}); * Parâmetros: itemDelete o nome do estilo do botão de exclusão*/; (function ($) {$ .fn.TouchWipe = function (option) {var defaults = {itemDelete: '.item-delete', // delete elemento}; var opts = $. $ (opts.IltemDelete) .Width (); (obj.style.webkittransform.replace (/translatex/(/g, "") .replace (/px/)/g, "")) * 1; = movex - initx; Delwidth; initx; OBJ.STYLE.WebkitTransform = "Translatex (" + -DelWidth + "PX)"; ""). obj.style.Transition = todos os 0.2s ";touchwipe.html
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <meta name = "viewport" id = "viewport" content = "width = width de dispositivo, escala inicial = 1"> <title> html5swipe esquerdo para delete o efeito </styless> margem: 0; estilo de lista: nenhum;} cabeçalho {background: #f7483b; Bottom de borda: 1px Solid #ccc} cabeçalho H2 {Text-align: Center; altura da linha: 54px; Size da fonte: 16px; Cor: #FFF} .List-ul {Overflow: Hidden} .List-Li {Linha-altura: 60px; fundo de borda: 1px Solid #fcfcfc; Posição: relativa; preenchimento: 0 12px; Cor: #666; Antecedentes: #f2f2f2; -webkit-transform: translatex (0px); } .btn {posição: absoluto; topo: 0; Direita: -80px; Alinhamento de texto: centro; Antecedentes: #ffcb20; Cor: #FFF; Largura: 80px} </style> </ad Head> <body> <wideler> <h2> Lista de mensagens </h2> </header> <csetion> <ul> <li id = "li"> <div> Sua entrega expressa chegou, por favor, assine as estações de baixo </div> <div> Delete </div> </li> <li> <dd> wow, o que está fazendo? Venha rapidamente e aguarde por você </div> <div> excluir </div> </li> </ul> </section> <p> x: <span id = "x"> </span> </p> <p> objx: <span id = "objx"> </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 type = "text/javascript" srrscript> " type = "text/javascript"> $ (function () {$ ('. list-li'). touchwipe ({itemDelete: '.btn'});}); </script> </body> </html>Efeito:
Efeitos de aplicação em projetos reais:
Eliminar bugs
Indo para a etapa acima, basicamente percebemos as funções de que precisamos. Mas existem vários problemas :
1. O clique do botão de exclusão à direita falha porque o intervalo não pode borbulhar no botão grande;
2. Um problema muito sério. Adicionamos um evento Touchmove à div e bloqueamos o evento original do navegador com o PreventDefault (), o que fez com que a página não pudesse rolar ao deslizar para cima e para baixo na div!
O primeiro problema é mais fácil de resolver. Removemos o período diretamente e escrevemos "Excluir" no CSS: antes, como este:
.Itemwipe .Item-DELETE: antes de {content: 'delete'; Cor: #fff;}Para o segundo problema, diz -se que é o Croll resolvê -lo online. Aqui nos referimos à operação deslizante dos contatos no QQ móvel.
Princípio geral: No início do deslizamento, determine se o eixo y se move mais ou o eixo x se move mais. Se o eixo x se mover grande, é julgado como uma operação de exclusão deslizante e usaremos o PreventDefault ();
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.