Análisis de principios de conmutación de pantalla deslizante de gestos de una sola página HTML5

El interruptor de pantalla deslizante de gestos de una sola página H5 se implementa utilizando el evento táctil HTML5 (touch) y la animación CSS3 (transición).

Suponiendo que hay 5 páginas, cada página representa una pantalla 100%ancha, luego cree una ventana gráfica de contenedor Div, establezca su ancho (ancho) en 500%, luego coloque 5 páginas en el contenedor y deje que estas 5 páginas dividan las 5 páginas .

 <Div id = Viewport class = Viewport> <div class = PageView style = Background: #3b76c0> <h3> Page -1 </h3> </div> <div class = pageView = backgggggggggggggggg redonde: #58c03b;> <h3 > Page -2 </h3> </div> <div class = PageView style = fondo: #C03B25;> <h3> Page -3 </h3> </div> <div class = PageView style = fondo: #e0a777777777777 18;> <h3> Página -4 </h3> </div> <div class = PageView style = fondo: #c03eac;> <h3> página -5 </h3> </div> </div>

Estilo CSS:

 .ViewPort {ancho: 500%; Un evento de clic, tenga en cuenta que -webkit-transform: traduce3d (0,0,0);

Registre el touchstart, touchmove y touchend incidente. , 0) de Viewport (100%, 0,0).

Desde el dedo en la pantalla, la operación deslizante y la salida de la pantalla hay un proceso de operación completo.

Pon tus dedos en la pantalla: OnTouchStart

Slipa los dedos en la pantalla: OnTouchmove

El dedo deja la pantalla: OnTouchend

Necesitamos capturar estas tres etapas de toques de incidentes para completar el deslizamiento de la página:

OnTouchStart: Variables inicializadas, registre la ubicación del dedo, registre la hora actual

 /*Coloque sus dedos en la pantalla*/document.addeventRistener (touchStart, function (e) {e.preventDefault (); var touch = e.Touchs [0]; startx = touch.pagex; starty touch.pagey; inicialpos = CurrentPosition; / la ubicación inicial de este tiempo.

OnTouchMove: Obtenga la ubicación actual, calcule la diferencia móvil deltax en la pantalla y luego haga que la página siga el movimiento

 /*Deslice sus dedos en la pantalla, y la página sigue el dedo para moverse*/document.addeventRistener (touchmove, function (e) {e.preventDefault (); var touch = e.touchs [0]; var deltax = touch = touch = touch .P AGEX -StartX; Math.abs (deltay) {Movelength = deltax; 0 && traducir> = maxwidth) {// página móvil this.transform.call (Viewport, traducir); esto), falso);

OnTouchend: cuando su dedo sale de la pantalla, la página se calcula en la que finalmente se mantiene. Primero, calcule el tiempo de suspensión del dedo en la pantalla deltat.

Si se desliza rápidamente, deje que la página actual permanezca en el centro de la pantalla (cuánto necesita para deslizar la página actual)

Si se desliza lentamente, también debe juzgar la distancia del deslizamiento de su dedo en la pantalla. En la página actual

 /*Cuando el dedo sale de la pantalla, calcule qué página necesita permanecer al final*/document.addeventRistener (touchind, function (e) {e.preventDefault (); var traducción = 0; // Calcule el tiempo de la hora del dedo en la pantalla. S Facilia -Webkit -Transform; +Pagewidth-Movelath; {// Si la distancia deslizante es inferior al 50 %de la pantalla, regrese a la página anterior if (math.abs (Movelength)/PageWidth <0.5) {traduce = atrrentposity-Movel longitud; traducir == 'Left'? Completamente en la pantalla the this.transform.call (Viewport, traducir);}}.

Además, debe calcular la página actual es la página y establecer el número de página actual

 // Calcule el número de página actual Pagenow = Math.round (Math.abs (traducir)/PageWidth) + 1; El tartamude esto aparecerá.

Estas son las ideas básicas. https://github.com/git -onepixel/guyure

Lo anterior es el análisis del principio del principio de conmutación de la pantalla deslizante de gestos HTML5 introducido por Xiaobian. tiempo. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!