O interruptor de tela deslizante de gesto único H5 é implementado usando o evento HTML5 Touch (Touch) e CSS3 (transição).
1. Princípio da implementaçãoSupondo que existam 5 páginas, cada página é responsável por uma tela 100%larga e, em seguida, crie uma visualização de contêiner de div, defina sua largura (largura) a 500%e, em seguida, coloque 5 páginas no contêiner e deixe essas 5 páginas dividirem as 5 páginas .
<div id = viewport class = viewport> <div class = PageView style = Background: #3b76c0> <h3> página -1 </h3> </div> <div class = PageView = backgggggggggggg Round: #58C03B;> <H3 > Página -2 </h3> </div> <div class = PageView Style = Background: #C03B25;> <H3> Página -3 </h3> </div> <div class = Pageview style = Background: #e0a777777777777 18;> <H3> página -4 </h3> </div> <div class = PageView Style = Background: #C03EAC;> <H3> página -5 </h3> </div> </div>
Estilo CSS:
.ViewPort {Width: 500%; um evento de clique, observe-nowebkit-transform: translate3d (0,0,0);Registre o TouchStart, o Touchmove e o Toukend Incidir. , 0) da visualização (100%, 0,0).
2. Pensamento principalDo dedo na tela, a operação de deslizamento e a saída da tela é um processo de operação completo.
Coloque os dedos na tela: OnTouchstart
Deslize os dedos na tela: OnTouchmove
Folhas de dedo a tela: OnTouchend
Precisamos capturar esses três estágios de tocar incidentes para completar o deslizamento da página:
OnTouchStart: variáveis inicializadas, gravar a localização do dedo, gravar a hora atual
/*Coloque os dedos na tela*/document.addeventRistener (touchstart, function (e) {e.PreventDefault (); var Touch = e.Tochs [0]; startx = touch.pagex; starty touch.pagey; inicialpos = CurrentPoition;OnTouchMove: Obtenha o local atual, calcule a diferença de movimento Deltax na tela e depois faça a página seguir o movimento
/*Deslize os dedos na tela e a página segue o dedo para mover*/document.addeventRistener (touchmove, function (e) {e.PreventDefault (); var Touch = e.Touchs [0]; var deltax = touch .P AGEX -STARTX; Math.abs (Deltay) {MoveLength = Deltax; 0 && Traduzir> = MaxWidth) {// Página móvel this.Transform.Call (Viewport, tradução); isso), falso);OnTouchend: Quando o dedo sai da tela, a página é calculada em qual página finalmente permanece. Primeiro, calcule o tempo de suspensão do dedo na tela Deltat.
Se estiver deslizando rápido, deixe a página atual permanecer no centro da tela (quanto você precisa para deslizar a página atual)
Se estiver deslizando lentamente, você também precisa julgar a distância do deslizamento do dedo na tela. Na página atual
/*Quando o dedo sair da tela, calcule qual página você precisa permanecer no final*/document.addeventRistener (touchind, function (e) {e.preventDefault (); var tradução = 0; // calcule o tempo do dedo na tela. S ASSLIGUEIRA -Webkit -Transform; +Página Longa {// Se a distância deslizante for menor de 50 %da tela, retorne à página anterior se (Math.abs (MoveLength)/PageWidth <0.5) {Tradlate = AtrrentPosity-moveLength; Traduzir == 'Esquerda'? Completamente na tela o this.Transform.Call (Viewport, traduz);}}.Além disso, você precisa calcular a página atual é a página e definir o número atual da página
// Calcule o número da página atual pagenow = Math.Round (Math.abs (tradução)/PageWidth) + 1; A gagueira isso aparecerá.
Essas são as idéias básicas. https://github.com/git-onepixel/hóspedes
A análise acima é a análise do princípio do Princípio de Criação HTML5 -PAGE Gesto, introduzido pela Xiaobian. tempo. Muito obrigado pelo seu apoio ao site VevB Wulin!