Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of single-page gesture sliding screen switching in HTML5, which is very detailed and has a certain reference value. Interested friends must finish reading it!

1. Realization principle

Suppose there are 5 pages, each accounting for 100% of the width of the screen, create a p container viewport, set its width (width) to 500%, then put 5 pages into the container, and divide the 5 pages equally into the entire container. Finally, set the default location of the container to 0 hidden, so that the screen displays the first page by default.

Page-1

Page-2

Page-3

Page-4

Page-5

CSS style:

.click {width: 500%; height: 100%; display:-webkit-box; overflow: hidden; / / pointer-events: none; / / this sentence will invalidate the click event on the entire page. To bind the click event, please note-webkit-transform: translate3d; backface-visibility: hidden; position: relative;}

Register the touchstart,touchmove and touchend events. When you swipe your finger on the screen, use the transform of CSS3 to set the position of the viewport in real time. For example, to display the second page, you can set the transform:translate3d of viewport (100% translateX,translate3d 0). Here, we can use translate3d instead of translateX,translate3d to actively enable mobile GPU to accelerate rendering, and the page can slide more smoothly.

It is a complete operation process from placing the finger on the screen, sliding the operation, and then leaving the screen, and the corresponding action triggers the following events:

Fingers on the screen: ontouchstart

Swipe your fingers on the screen: ontouchmove

Fingers off the screen: ontouchend

We need to capture these three stages of the touch event to complete the page sliding:

Ontouchstart: initialize the variable, record the position of the finger, record the current time

/ * put your finger on the screen * / document.addEventListener ("touchstart", function (e) {e.preventDefault (); var touch = e.touches [0]; startX = touch.pageX; startY = touch.pageY; initialPos = currentPosition; / / initial position before this slide viewport.style.webkitTransition = ""; / / cancel the animation effect startT = new Date (). GetTime (); / record the start time of finger press isMove = false / / whether to slide} .bind (this), false)

Ontouchmove: get the current position, calculate the difference of finger movement on the screen deltaX, and then make the page follow the movement.

/ * the finger slides on the screen and the page follows the finger movement * / document.addEventListener ("touchmove", function (e) {e.preventDefault (); var touch = e.touches [0]; var deltaX = touch.pageX-startX; var deltaY = touch.pageY-startY; / / if the displacement in the X direction is greater than that in the Y direction, it is considered to be sliding if (Math.abs (deltaX) > Math.abs (deltaY)) {moveLength = deltaX Var translate = initialPos + deltaX; / / current location to move to / / if translate > 0 or

< maxWidth,则表示页面超出边界 if (translate = maxWidth){ //移动页面 this.transform.call(viewport,translate); isMove = true; } direction = deltaX>

0? "right": "left"; / / determine the direction of finger sliding}} .bind (this), false)

Ontouchend: calculates which page the screen ends up on when the finger leaves the screen. First calculate the residence time deltaT of the finger on the screen, if deltaT 0? 0: translate; / / left boundary translate = translate

< maxWidth ? maxWidth : translate; //右边界 }else { //如果滑动距离小于屏幕的50%，则退回到上一页 if (Math.abs(moveLength)/pageWidth < 0.5){ translate = currentPosition-moveLength; }else{ //如果滑动距离大于屏幕的50%，则滑动到下一页 translate = direction == 'left'? currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength; translate = translate >

0? 0: translate; translate = translate < maxWidth? MaxWidth: translate;}} / / perform a slide so that the page is fully displayed on the screen this.transform.call (viewport,translate);}} .bind (this), false)

In addition, calculate the page number of the current 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, the DOM operation needs to be placed in a child thread, otherwise it will appear stutter this.setPageNow ();} .bind (this), 100). The above is all the contents of this article entitled "example Analysis of single-page gesture sliding screen switching in HTML5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.