H5 단일 페이지 슬라이딩 스크린 스위치는 HTML5 터치 이벤트 (Touch) 및 CSS3 애니메이션 (전환)을 사용하여 구현됩니다.
1. 구현 원리5 페이지가 있다고 가정하면 각 페이지 각 페이지가 100%와이드 스크린을 차지한 다음 Div 컨테이너 뷰포트를 작성하고 너비 (너비)를 500%로 설정 한 다음 5 페이지를 컨테이너에 넣고 5 페이지를 5 페이지로 나누게하십시오. 전체 컨테이너는 컨테이너의 기본 위치를 0으로 설정하고 화면이 기본적으로 첫 페이지를 표시합니다.
<div id = viewport class = viewport> <div class = pageview style = 배경 : #3b76c0> <h3> page -1 </h3> </div> <div class = pageview = backgggggggggggggggg Round : #58c03b;> <h3 > Page -2 </h3> </div> <div class = pageview style = 배경 : #c03b25;> <h3> page -3 </h3> </div> <div class = pageview style = 배경 : #e0A77777777777 18;> <h3> 페이지 -4 </h3> </div> <div class = pageview style = background : #c03eac;> <h3> page -5 </h3> </div> </div>
CSS 스타일 :
.Viewport {너비 : 500%; 클릭 이벤트, -webkit transform : translate3d (0,0,0);T , 0)의 뷰포트 (100%, 0,0)는 Translate3D를 사용하여 렌더링을 가속화 할 수 있으며 페이지 슬라이드가 더 매끄 럽습니다.
2. 주요 사고화면의 손가락에서 슬라이딩 작동 및 화면을 떠나는 것은 해당 작업 과정입니다.
화면에 손가락을 넣으십시오 : OntouchStart
화면에서 손가락을 스 와이프하십시오 : Ontouchmove
손가락은 화면을 떠난다 : 온타치 엔드
페이지의 슬라이딩을 완료하기 위해이 세 가지 단계의 터치 사건을 캡처해야합니다.
OntouchStart : 초기 변수, 손가락의 위치를 기록하고 현재 시간을 기록하십시오.
/*화면에 손가락을 넣습니다*/document.addeventristener (touchStart, function (e) {e.preventDefault (); var touch = e.touchs [0]; startx = t CurrentSpection; //이 뷰포트의 위치.Ontouchmove : 현재 위치를 가져 와서 화면의 이동 차이 deltax를 계산 한 다음 페이지를 따라 이동하십시오.
/*화면에서 손가락을 스 와이프하면 페이지가 손가락을 따라 이동하여*/document.addeventristener (touchmove, function (e) {e.preventDefault (); var touch = e.touchs [0]; var deltax = touch .p agex -Startx; var deltay = pagey -starty; math.abs (deltay) {movelength = deltax = initialpos + deltax; 0 &/ mobile page this.call (viewport, ismove = true); 이것), false);ONTOUCHEND : 손가락이 화면을 떠나면 페이지가 계산됩니다. 먼저, 델타 <300ms의 손가락 체류 시간을 계산하십시오.
빠르게 미끄러지면 현재 페이지가 화면 중앙에 머무르도록하십시오 (현재 페이지를 밀어야하는 금액은 얼마입니까?
천천히 미끄러지면 화면에서 손가락 슬라이딩 거리를 판단해야합니다 현재 페이지에서
/*손가락이 화면을 떠날 때 끝에 남아 있어야하는 페이지를 계산하십시오*/document.addeventristener (t 화면의 손가락. gettime () -startt (iSmove) {// 정당한 슬라이드를 사용하여 페이지를 최종 위치 viewport.style.webkittransitation = 0.3으로 슬라이드하십시오. sease -webkit -transform (deltat <300) Pagewidth-Movelength; {// 슬라이딩 거리가 화면의 50 %미만인 경우 (Math.abs (movelength)/pagewidth <0.5) {다음 페이지로 슬라이드하면 %; 번역하십시오 '왼쪽'? 화면에서 this.transform.call (viewport, translate);}}, false);또한 현재 페이지가 페이지 인 페이지를 계산하고 현재 페이지 번호를 설정해야합니다.
// 현재 페이지 번호를 계산하십시오 Pagenow = Math.Round (Math.abs (Translate)/pagewidth) + 1; 말더듬이.
이것들은 기본적인 아이디어입니다. 물론 실제 작동 과정에주의를 기울일 수 있습니다. https://github.com/git-onepixel/guesture
위는 Xiaobian이 도입 한 HTML5 단일 페이지 슬라이딩 스위치 원리의 원리에 대한 분석입니다 시간. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!