HTML5 single page gesture sliding screen switching principle analysis

The H5 single -page gesture sliding screen switch is implemented using the HTML5 touch event (Touch) and CSS3 animation (transition). The renderings are shown below. This article briefly tells its implementation principles and main ideas.

Assuming that there are 5 pages, each page accounts for 100%wide screen, then create a DIV container ViewPort, set its width (WIDTH) to 500%, then put 5 pages into the container, and let these 5 pages divide the 5 pages. The entire container, finally set the default position of the container to 0, and overflow to Hidden, so the screen displays the first page by default.

 <div ID = viewport class = viewport> <div class = pageview style = Background: #3B76C0> <H3> Page -1 </h3> </div> <div class = PageView = BACKGGGGGGGGGGGGGGG Round: #58C03B;> <H3 > Page-2 </H3> </DIV> <DIV Class = PageView style = Background: #C03b25;> <H3> Page -3 </h3> </div> <div class = PageView style = Background: #E0A77777777777 18 ;> <h3> page -4 </h3> </div> <div class = pageview style = background: #c03eac;> <h3> page-5 </h3> </div> </div>

CSS style:

 .Viewport {width: 500%; height: 100%; display: -webkit-box; oven; // point-events: none; // This sentence will cause the click event on the entire page to fail, if you need For a click event, please note -webkit-transform: translate3d (0,0,0); backface-visibility: hidden; posity: related

Register the TouchStart, TouchMove and Touchend incident. When the fingers slide on the screen, use CSS3 transform to set the location of the ViewPort in real time. For example, to display the second page, set the TRANSFORM: translate3d (100%, 0,0) of ViewPort (100%, 0,0). That's how, here we use Translate3D to replace TranslateX. Translate3D can actively open the mobile GPU to accelerate rendering, and the page slides is smoother.

From the finger on the screen, sliding operation, and leaving the screen is a complete operation process. The corresponding operation will trigger the following incident:

Put your fingers on the screen: OntouchStart

Swipe your fingers on the screen: OntouchMove

Finger leaves the screen: onTouchend

We need to capture these three stages of touching incidents to complete the sliding of the page:

OntouchStart: initialized variables, record the location of the finger, record the current time

 /*Put your fingers on the screen*/document.addeventristener (TouchStart, Function (E) {e.preventDefault (); VAR TOUCH = E.TouchS [0]; Startx = Touch.pagex; Starty Touch.pagey; Initialpos = Currentposition; // The initial location of this time ViewPort.style.webkittransition =; // Cancel the animation effect startttt = new date (). Gettime (); Slip the sliding} .Bind (this), false);

OntouchMove: Get the current location, calculate the moving difference Deltax on the screen, and then make the page follow the move

 /*Swipe your fingers on the screen, and the page follows the finger to move*/document.addeventristener (TouchMove, Function (E) {e.preventdefault (); var touch = e.touchS [0]; VAR DELTAX = Touch.p Agex -startx; Var deltay = touch.pagey -starty; // If the displacement in the x direction is greater than the Y direction, it is considered to be the left and right slide if (math.abs (deltax)> math.abs (deltay) {movelength = deltax; var translate = initialpos + deltax; // The current position that needs to be moved // If translate> 0 or <maxwidth, it means the page exceeds the boundary if (translate <= 0 && translate> = maxwidth) {// Mobile page this.transForm.Call ( Viewport, Translate); Ismove = TRUE;} Direction = Deltax> 0? Right: left; // Judging the direction of finger sliding}. bind (this), false);

Ontouchend: When your finger leaves the screen, the page is calculated which page finally stays on. First, calculate the stay time of the finger on the screen Deltat. If Deltat <300ms, it is considered to be quickly sliding. On the contrary, it is slow to slide.

If it is fast sliding, let the current page stay in the center of the screen (how much do you need to slide the current page)

If it is slowly sliding, you also need to judge the distance of the sliding of your finger on the screen. If the sliding distance does not exceed 50%of the screen width, you must return to the previous page. On the contrary, stay on the current page

 /*When the finger leaves the screen, calculate which page you need to stay in the end*/document.addeventristener (TOUCHIND, Function (E) {e.preventdeFault (); VAR Translation = 0; // Calculate the time of the finger on the screen. deltat = new date (). Gettime () -STartt; if (ISMOVE) {// Two -right slide // Use animation transition to let the page slide to the final position Viewport.style.webkittransitation = 0.3s Ease -webkit -Transform; If (deltat <300) {// If the stay time is less than 300ms, it is considered to be fast sliding. No matter how much the sliding distance is, it stays to the next page. Currentposition+PageWidth-Movelength; // If the final position exceeds the boundary position, stay at the border position translate = translate> 0? 0: translate; // The left boundary translate = translate <maxwidth? Translate; // Right boundary} else {// If the sliding distance is less than 50%of the screen, return to the previous page if (math.abs (movelength)/pageWidth <0.5) {translate = atrrentposity-movelength; %, If you slide to the next page translate == 'left'? CurrenTposition- (PageWidth+Movelength): Currentposition+PageWidth-Movelength; > 0? 0: Translate; Translate = translate <maxwidth? Maxwidth: Translate ;}} // Perform the sliding and let the page display completely on the screen the This.transform.call (viewport, translate);}}. Bind (this), false);

In addition, you need to calculate the current page is the page, and set the current page number

 // Calculate the current page number pagenow = math.round (math.abs (translate) /pageWidth) + 1; settimeout (function () {// Set the page number, otherwise it will be placed in the sub -thread, otherwise the stutter This This will appear. .setpagenow ();}. bind (this), 100);

These are the basic ideas. Of course, there are some details in the actual operation process to pay attention. I do n’t say it in detail here. It can be reflected in the code. The source code has been passed to github: https://github.com/git -Onepixel/Guesture

The above is the analysis of the principle of the HTML5 single -page gesture sliding screen switching principle introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!