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

Today, I will talk to you about how to use HTML5 for single-page gesture sliding screen switching, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

H5 single-page gesture sliding screen switching is realized by using HTML5 touch event (Touch) and CSS3 animation (Transform,Transition). The effect is shown below.

1. Realization principle

Suppose there are 5 pages, each accounting for 100% of the width of the screen, create a DIV 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.

XML/HTML Code copies content to the clipboard

Page-1 page-2 page-3 page-4 page-5

CSS style:

XML/HTML Code copies content to the clipboard

Width: 500%; height: 100%; display:-webkit-box; overflow: hidden; pointer-events: none;-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.

2. Main ideas

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

XML/HTML Code copies content to the clipboard

/ * fingers 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 animation startT = new Date (). GetTime () / / record the start time of the finger press isMove = false; / / whether to slide} .bind (this), false); ontouchmove: get the current position, calculate the finger movement difference deltaX on the screen, and then make the page follow the movement.

XML/HTML Code copies content to the clipboard

/ * 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 translatetranslate = 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; translatetranslate = translate >

0? 0: translate; translatetranslate = 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

XML/HTML Code copies content to the clipboard

/ / 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 stutter this.setPageNow ();} .bind (this), 100) These are the basic ideas, of course, there are still some details to pay attention to in the actual operation, which will not be discussed in detail here, but can be reflected in the code.

After reading the above, do you have any further understanding of how to use HTML5 for single-page gesture sliding screen switching? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.