Одиночный экран Single -страница H5 реализуется с использованием анимации HTML5 Touch (Touch) и CSS3 (переход).
1. Принцип реализацииПредполагая, что существует 5 страниц, каждая страница составляет 100%широкий экран, а затем создайте просмотр View Container, установите ширину (ширину) на 500%, затем поместите 5 страниц в контейнер и позвольте этим 5 страницам разделиться на 5 страниц ..
<div id = viewport class = viewport> <div class = pageview style = founke: #3b76c0> <h3> page -1 </h3> </div> <div class = pageview = backgggggggggggggg Round: #58c03b;> <h3 > Стр. 2 </h3> </div> <div class = pageview style = fourene: #c03b25;> <h3> страница -3 </h3> </div> <div class = pageview style = fouren: #e0a777777777777 18;> <h3> Страница -4 </h3> </div> <div class = pageview style = fourene: #c03eac;> <h3> page -5 </h3> </div> </div>
Стиль CSS:
.Viewport {ширина: 500%; Событие CLICK, обратите внимание на -вет-трансформу: Translate3d (0,0,0);Зарегистрируйте инцидент TouchStart, Touchmove и Touchend. 0) Viewport (100%, 0,0).
2. Основное мышлениеОт пальца на экране, операция скольжения, и оставление экрана - это полный процесс работы.
Положите пальцы на экран: ontouchstart
Проведите пальцы на экране: ontouchmove
Палец покидает экран: ontouchend
Нам нужно запечатлеть эти три этапа трогательных инцидентов, чтобы завершить скольжение страницы:
OnTouchStart: инициализированные переменные, запишите место расположения пальца, запишите текущее время
/*Поместите пальцы на экран*/document.addeventristener (touchStart, function (e) {e.preventDefault (); var touch = e.touchs [0]; startx = touch.pagex; starty touch.pagey; initialpos = CurrentPosition;OnTouchMove: Получите текущее местоположение, вычислите Deltax различия на экране, а затем заставьте страницу.
/*Проведите пальцы на экране, и страница следует за пальцем, чтобы перемещать*/document.addeventristener (touchmove, function (e) {e.preventdefault (); var touch = e.touchs [0]; var deltax = touch .p Agex -Startx; math.abs (deltay) {movelength = deltax; 0 && translate> = maxwidth) {// Страница это), false);OnTouchend: Когда ваш палец покидает экран, рассчитывается страница, которая, наконец, остается включенной. Во -первых, рассчитайте время пребывания пальца на экране Deltat.
Если он быстро скользит, пусть текущая страница останется в центре экрана (сколько вам нужно для скольжения текущей страницы)
Если он медленно скользит, вам также необходимо судить о расстоянии от скольжения пальца на экране. На текущей странице
/*Когда пальцем покидает экран, вычислите, какую страницу вам нужно остаться в конце*/document.addeventristener (touchind, function (e) {e.preventdefault (); var translation = 0; // Рассчитайте время Палец на экране. S UST -WEBKIT -Transform; +Page-wwith-movelenge; {// Если расстояние скольжения составляет менее 50 %от экрана, вернитесь к предыдущей странице if (math.abs (movelength)/pagewidth <0,5) {translate = atrrentposity-movelength; Translate == 'Left'? полностью на экране this.transform.call (viewport, transtate);}}.Кроме того, вам необходимо вычислить текущую страницу, и установить текущий номер страницы
// Рассчитайте текущий номер страницы pagenow = math.round (math.abs (transtate)/pagewidth) + 1; Заикание это будет.
Это основные идеи. https://github.com/git-onepixel/gealthure
Приведенное выше анализ принципа Sno -Page Screence Principle HTML5. время. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!