Analyse du principe de commutation d'écran coulissante à geste de page HTML5.

L'interrupteur d'écran coulissant à geste de page H5 est implémenté à l'aide de l'événement HTML5 Touch (Touch) et de l'animation CSS3 (transition).

En supposant qu'il y a 5 pages, chaque page représente un écran à 100% large, puis créer une fenêtre de conteneur Div, régler sa largeur (largeur) à 500%, puis mettre 5 pages dans le conteneur et laisser ces 5 pages diviser les 5 pages .

 <div id = Viewport class = Viewport> <div class = PageView style = background: # 3b76c0> <h3> page -1 </h3> </div> <div class = pageView = backgggggggggggggg rond: # 58c03b;> <h3 > Page-2 </h3> </ div> <div class = PageView style = background: # c03b25;> <h3> page -3 </h3> </div> <div class = pageview style = background: # e0a777777777 18;> <h3> Page -4 </h3> </div> <div class = PageView Style = Background: # C03EAC;> <H3> Page-5 </H3> </div> </div>

Style CSS:

 .Viewport {largeur: 500%; Un événement de clic, veuillez noter -webkit-transform: traduire3d (0,0,0);

Enregistrez l'incident Touchstart, TouchMove et Touchend. , 0) de la fenêtre (100%, 0,0).

Du doigt sur l'écran, le fonctionnement de glissement et la sortie de l'écran est un processus de fonctionnement complet.

Mettez vos doigts sur l'écran: Ontouchstart

Glissez vos doigts sur l'écran: Ontouchmove

Le doigt quitte l'écran: Ontouchend

Nous devons capturer ces trois étapes de toucher des incidents pour compléter le glissement de la page:

OnTouchStart: variables initialisées, enregistrer l'emplacement du doigt, enregistrer l'heure actuelle

 / * Mettez vos doigts sur l'écran * / document.adDeventRériser (TouchStart, fonction (e) {e.PreventDefault (); var Touch = e.Touchs [0]; startx = touch.pagex; starty touch.pagey; initialpos = CurrentPosition; // l'emplacement initial de cette fenêtre de temps.

ONTOUCHMOVE: Obtenez l'emplacement actuel, calculez la différence de déménagement deltax à l'écran, puis faites suivre la page

 / * Glissez vos doigts sur l'écran, et la page suit le doigt pour déplacer * / document.adDeventRistERner (TouchMove, fonction (e) {e.PreventDefault (); var touch = e.touchs [0]; var deltax = Touch .p Agex -StartX; Math.Abs ​​(deltay) {MOUVELLOGNE = DELTAX; 0 && traduire> = maxwidth) {// Page mobile. this), false);

ONTOUCHEND: Lorsque votre doigt quitte l'écran, la page est calculée sur quelle page reste enfin. Tout d'abord, calculez le temps de séjour du doigt sur l'écran Deltat.

S'il glisse rapidement, laissez la page actuelle rester au centre de l'écran (combien avez-vous besoin de glisser la page actuelle)

Si elle glisse lentement, vous devez également juger la distance du glissement de votre doigt sur l'écran. Sur la page en cours

 / * Lorsque le doigt quitte l'écran, calculez la page dont vous avez besoin pour rester à la fin * / document.addeventRristener (TouchInd, fonction (e) {e.PreventDefault (); Var Translation = 0; // Calculez le temps du temps du temps doigt sur l'écran. S Emplacement -Webkit -Transform; + PageWidth-Movelgth; {// Si la distance coulissante est inférieure à 50% de l'écran, retournez à la page précédente if (math.abs (moveLength) / PageWidth <0,5) {tradlate = atrentPosity-movelngth; traduire == 'Left'? entièrement à l'écran, this.transform.call (fenêtre, traduire);}}.

De plus, vous devez calculer la page actuelle est la page et définir le numéro de page actuel

 // Calculez le numéro de page actuel pagenow = math.round (math.abs (traduire) / pagewidth) + 1; le bégaiement ceci apparaîtra.

Ce sont les idées de base. https://github.com/git -onepixel / invité

Ce qui précède est l'analyse du principe du principe de commutation d'écran coulissante de la page HTML5 introduite par Xiaobian. temps. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!