Der H5 -Gesten -Slide -Bildschirmschalter wird mit dem HTML5 -Touch -Ereignis (Touch) und der CSS3 -Animation (Übergang) implementiert.
1. ImplementierungsprinzipAngenommen, es gibt 5 Seiten, jede Seite macht 100%Breitbildschirm aus, erstellen Sie dann ein Div -Container -Ansichtsfenster, setzen Sie ihre Breite (Breite) auf 500%, legen Sie 5 Seiten in den Container und lassen Sie diese 5 Seiten die 5 Seiten trennen . Setzen Sie den gesamten Container schließlich die Standardposition des Containers auf 0 und überlaufen auf, sodass der Bildschirm die erste Seite standardmäßig angezeigt wird.
<div ID = Ansichtsportalklasse = AnsichtPort> <div class = pageView style = Hintergrund: #3b76c0> <H3> Seite -1 </h3> </div> <div class = pageView = backgggggggggggggg: #58c03b;> <H3 > Seite 2 </H3> </div> <div class = pageView style = Hintergrund: #C03B25;> <H3> Seite -3 </h3> </div> <div class = pageView style = Hintergrund: #e0a777777777 18.
CSS -Stil:
. Ein Klick-Ereignis, bitte beachten Sie-Webkit-Transformation: Translate3d (0,0,0);
Registrieren Sie den Vorfall mit TouchStart, Touchmove und Touchend. , 0) des Ansichtsfensters (100%, 0,0).
2. HauptdenkenAus dem Finger auf dem Bildschirm ist der Schieberbetrieb und das Verlassen des Bildschirms ein vollständiger Betriebsprozess.
Legen Sie Ihre Finger auf den Bildschirm: OnTouchstart
Wischen Sie mit den Fingern auf den Bildschirm: OnTouchmove
Finger verlässt den Bildschirm: OnTouchend
Wir müssen diese drei Phasen der Berührung von Vorfällen erfassen, um das Schieben der Seite zu vervollständigen:
OnTouchstart: Initialisierte Variablen, zeichnen Sie den Ort des Fingers auf, zeichnen Sie die aktuelle Zeit auf
/*Legen Sie Ihre Finger auf den Bildschirm*/document.addeVentristener (TouchStart, Funktion (e) {e.preventDefault (); var touch = e.touchs [0]; startx = touch.pagex; starty touch.pagey; initialpos = CurrentPosition;OnTouchmove: Nehmen Sie den aktuellen Standort ab, berechnen Sie die Differenzdifferenzdifferenz auf dem Bildschirm und lassen Sie sich dann der Seite bewegt
/*Wischen Sie Ihre Finger auf den Bildschirm, und die Seite folgt dem Finger, um sich zu verschieben .p AGEX -STARTX; Math.abs (Deltay) {Movelength = Deltax; 0 && translate> = maxwidth) {// mobile Seite this.transform.call (Ansichtsfenster, übersetzt); dies), falsch);OnTouchend: Wenn Ihr Finger den Bildschirm verlässt, wird die Seite berechnet, auf welcher Seite schließlich bleibt. Berechnen Sie zunächst die Aufenthaltszeit des Fingers auf dem Bildschirmdeltat.
Wenn es schnell gleitet, lassen Sie die aktuelle Seite in der Mitte des Bildschirms bleiben (wie viel müssen Sie die aktuelle Seite schieben)
Wenn es langsam gleitet, müssen Sie auch die Entfernung des Fingerabstands auf dem Bildschirm beurteilen. Auf der aktuellen Seite
/*Wenn der Finger den Bildschirm verlässt, berechnen Sie, welche Seite Sie am Ende bleiben müssen Finger auf dem Bildschirm. S LEARDE -Webkit -Übertragung; +PageWidth-Moveleng; {// Wenn der Gleitabstand weniger als 50 %des Bildschirms beträgt, kehren Sie zur vorherigen Seite zurück, wenn (math.abs (movelength)/pagewidth <0,5) {translate = aTrrentPosition-Movelength; Translate == 'links'? vollständig auf dem Bildschirm die this.transform.call (Ansichtsfenster, übersetzen);}}.Zusätzlich müssen Sie die aktuelle Seite berechnen, die Seite ist, und die aktuelle Seitennummer festlegen
// Berechnen Sie die aktuelle Seitenzahlen. Das stottern dies.
Dies sind die grundlegenden Ideen. https://github.com/git -onepixel/gäste
Die oben genannte Analyse des Prinzips des HTML5 -Gesten -Schieberegitels, das von Xiaobian eingeführt wird, wird es für alle hilfreich sein, wenn Sie Fragen haben. Zeit. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!