In diesem Artikel wird Ihnen die Beispiele für die Implementierung von Vorgängen für Kontakte wie QQ mitgeteilt: Swischen Sie nach links und schieben Sie die Schaltfläche Löschen aus. Wenn es mehr als die Hälfte gleitet, gleitet es automatisch nach unten. Wenn es weniger als die Hälfte veröffentlicht, kehrt es an seinen ursprünglichen Ort zurück.
Reine JS -Implementierung
Verwenden Sie H5 Touchmove und andere Ereignisse und ändern Sie JS, um das Übersetzungsattribut von CSS3 dynamisch zu ändern, um einen Animationseffekt zu erzielen:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewPort" id = "viewport" content = "width = Gerätebraute, initial-scale = 1"> <title> html5Swipe links, um die Spezialwirkung zu löschen, um die Spezialwirkung zu löschen </title> <stils </title> <titels: Rand: 0; Listenstil: Keine; } Header {Hintergrund: #f7483b; Border-Bottom: 1PX Solid #CCC} Header H2 {Text-Align: Mitte; Zeilenhöhe: 54px; Schriftgröße: 16px; Farbe: #fff} .List-ul {Überlauf: versteckt} .List-li {Zeilenhöhe: 60px; Border-Bottom: 1PX Solid #fcfcfc; Position: Relativ; Polsterung: 0 12px; Farbe: #666; Hintergrund: #F2F2F2; -Webkit-transform: translatex (0px); } .BTN {Position: absolut; Top: 0; Rechts: -80px; Text-Align: Mitte; Hintergrund: #ffcb20; Farbe: #fff; Breite: 80px} </style> <skript>/** Beschreibung: HTML5 Apple Phone wischt links, um die Spezialeffekte zu löschen*/Fenster. Event.PreventDefault (); "") * 1; > = 0) {Obj.Style.Webkittransform = "Translatex (" + 0 + "px)"; = "Translatex (" + -l + "px)"; Event.TArgTouches [0] .Pagex; "px)"; (obj.className == "list -li") {objx = (obj.style.webkittransform.replace (/translatex/(/g ") .Replace (/px/)/g,") * 1; "px)"; Die Lieferung ist angekommen. Bitte unterschreiben Sie unten </div> <div> </div> </li> <li> <Viv> Wow, was machst du? Kommen Sie schnell und warten Sie auf Sie.Zu Zepto Plugin gemacht
In tatsächlichen Projekten haben wir möglicherweise viele Orte, die diese Funktion nutzen. Jetzt haben wir diese Funktion zu einem Zepto-Plug-In gemacht, um später eine einfache Verwendung zu erhalten.
In diesem Plugin implementieren wir diese Funktion nur und geben dann Parameter (den Stilnamen der Schaltfläche löschen) übergeben, damit das Programm die für die Wiederverwendung geeignete Entfernung berechnen kann.
zepto.touchwipe.js
/*** Zepto-Plug-In: Swipe links, um den Animationseffekt zu löschen. * Parameter: itemDelete Der Stilname der Schaltfläche Löcher*/; (Funktion ($) {$ .fn.touchwipe = function (Option) {var defaults = {itemDelete: '.Item-delete', // Element}; $ (optts.itemdelete). . Event.TArgettouches [0] .Pagex; if (l> delwidth) {l = delwidth; Event.TArgTouches [0] .Pagex; + "px)"; (Obj.Style.Webkittransform.Replace (/translatex/(/g, ") .Replace (/px/)") * 1; "px)"; }) // Kette zurückgeben;};}) (Zepto);tockwipe.html
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <meta name = "viewPort" id = "viewport" content = "width = Gerätebraute, initial-scale = 1"> <title> html5Swipe links, um die Spezialwirkung zu löschen, um die Spezialwirkung zu löschen </title> <stils </title> <titels: Rand: 0; Listenstil: Keine;} Header {Hintergrund: #f7483b; Border-Bottom: 1PX Solid #CCC} Header H2 {Text-Align: Mitte; Zeilenhöhe: 54px; Schriftgröße: 16px; Farbe: #fff} .List-ul {Überlauf: versteckt} .List-li {Zeilenhöhe: 60px; Border-Bottom: 1PX Solid #fcfcfc; Position: Relativ; Polsterung: 0 12px; Farbe: #666; Hintergrund: #F2F2F2; -Webkit-transform: translatex (0px); } .BTN {Position: absolut; Top: 0; Rechts: -80px; Text-Align: Mitte; Hintergrund: #ffcb20; Farbe: #fff; Breite: 80px} </style> </head> <body> <header> <h2> Nachrichtenliste </h2> </header> <abschnitt> <ul> <li id = "li"> <div> Ihre ausdrückliche Lieferung ist angekommen. Bitte melden Sie sich unten an. Kommen Sie schnell und warten Sie auf Sie. id = "movex"> </span> </p> <script type = "text/javaScript" src = "http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js" type = "text/javaScript"> $ (function () {$ ('. List-li'). TouchWipe ({itemDelete: '.btn'});}); </script> </body> </html>Wirkung:
Anwendungseffekte in tatsächlichen Projekten:
Fehler beseitigen
Wenn wir zum obigen Schritt gehen, erkennen wir im Grunde die Funktionen, die wir brauchen. Aber es gibt mehrere Probleme :
1. Das Klicken auf die Schaltfläche Löschen auf der rechten Seite schlägt fehl, da die Spannweite nicht auf die große Taste sprudeln kann.
2. Ein sehr ernstes Problem. Wir haben dem Div ein Touchmove -Ereignis hinzugefügt und das ursprüngliche Browser -Ereignis mit PreventDefault () blockiert, wodurch die Seite nicht in der Lage war, beim Auf und Ab in die DIV zu scrollen!
Das erste Problem ist leichter zu lösen. Wir entfernen die Spannweite direkt und schreiben "Delete" in CSS: vorher wie folgt:
.Itemwipe .Item-delete: vor {content: 'delete'; Farbe: #fff;}Für das zweite Problem wird gesagt, dass es sich bei der Lösung von Online -Lösung befindet. Hier beziehen wir uns auf den Gleitbetrieb von Kontakten in Mobile QQ.
Allgemeines Prinzip: Bestimmen Sie zu Beginn des Gleitens, ob sich die y-Achse mehr bewegt oder sich die x-Achse mehr bewegt. Wenn sich die X-Achse groß bewegt, wird sie als Schieberlöschvorgang beurteilt, und wir werden PreventDefault () verwenden.
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.