HTML5 how to achieve single page gesture slip screen switching

This article mainly introduces how HTML5 implements single-page gesture sliding screen, the text introduction is very detailed, with a certain reference value, interested friends must have read!

H5 single page gesture sliding screen switching is achieved with HTML5 touch events (TOUCH) and CSS3 animation (Transform, Transition)

1. Implementation principle

5 pages, each page accounts for 100% wide, create a DIV container ViewPort, set its width (width) to 500%, then load 5 page into the container and let these 5 pages fractional containers Finally, set the default location of the container to 0, but overflow is set to Hidden so that the screen displays the first page by default.

  

page-2

Page -3

page -5

.ViewPort {Width: 500%; Height: 100%; Display: -Webkit-Box; overflow: hidden; // Pointer-Events: None; // This sentence can cause clicking events on the entire page, if you need to bind to click event, please check –webkit-transform: Translate3D (0,0,0); BackfaCE-Visibility: Hidden; Position: Relative;}

Registered TouchStart, TouchMove and TouchEnd events, when the finger is slid on the screen, use the CSS3 TRANSFORM to set the location of ViewPort, For example, you want to display the second page, set the transform: Transform: Translate3D (100%, 0, 0) of ViewPort, where we use Translate3D instead of Translatex, TRANSLATE3D can actively turn on the mobile GPU acceleration rendering, and the page slides more smooth.

2, main ideas
 From finger on the screen, slide operation, then leave the screen is a complete operation process, the corresponding operation will trigger the following event:   Finger places on the screen: ONTOUCHSTART 
Finger Sliding on the screen: ONTOUCHMOVE

Fingers Leave Screen: Ontouchend

We need to capture these three phases of the incident to complete Page Sliding:

OntouchStart: Initialization Variable, record the position where the finger is located, record the current time

/ * Finger placed on the screen * / document.addeventListener (” TouchStart “, Function (e) {E.PreventDefault (); var touch = e.touches [0]; startX = touch.pagex; starty = touch.pagey; initialpos = currentposition; // Pre-initial location ViewPort .Style.webkittransition = “”; // Cancel the animation effect StartT = new Date () getTime ();. // recording start time of the finger pressed isMove = false; // if sliding} .bind (this), false);

ontouchmove: obtaining the current location, movement difference amount calculation finger deltaX on the screen, then the page follow the movement of

 / * finger across the screen, the page following the movement of the finger * / document.addEventListener ( "touchmove", function (e) {e.preventDefault (); var touch = e.touches [0]; var deltaX = touch.pageX - startX; var deltaY = touch.pageY - startY; // if displacement in the X direction than in Y direction, that is sliding around if (Math.abs (deltaX)> Math.abs (deltaY)) {moveLength = deltaX; var translate = initialPos + deltaX; // needs to be moved to this position // If translate> 0 or  = maxWidth) {// move page this.transform.call (viewport, translate); isMove = true;} direction = deltaX> 0 "right":? "left"; // the determination of the direction of finger sliding}} bind (this), false);  

upper HTHow to implement all the contents of single-page gesture sliding screens, thank you for reading! The content that wants to share is helpful to everyone, more related knowledge, welcome to pay attention to Tumi Yun Industry News Channel!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment