Example code for JavaScript to implement full screen sliding on mobile terminals, JS instances

Example code for JavaScript to implement full screen sliding on mobile terminals, JS instances

Basic Ideas:

1) detect the slide direction of the finger: Get the position when the finger is lifted, minus the position when the finger is pressed, and the positive is sliding down

2) After raising your finger, change the position of the current page to the corresponding reverse operation.

The Code is as follows:

Html

<Div id = "wrap"> <div id = "page01" class = "pages"> Screen 1 </div> <div id = "page02" class = "pages"> screen 2 </div> <div id = "page03" class = "pages"> Screen 3 </div> <div id = "page04" class = "pages"> screen 4 </div> <div id = "dots"> <span class = "now"> </span> <span class = ""> </span> <span class = ""> </span> <span class = ""> </span> </div>

Css

*{      margin:0;      padding:0;    }    body{      overflow: hidden;    }    #wrap > div{      width: 10rem;      position: absolute;      left: 0;      top: 0;      background: #fff;      transition: all 0.3s ease;    }    #dots{      position: fixed;      right: 5px;      top: 40%;      z-index: 9;    }    #dots span{      display: block;      height: 0.2rem;      width: 0.2rem;      border: 1px solid #000;      border-radius: 50%;      margin-bottom: 3px;    }    #dots .now{      background: #555;    }

Js is divided into two parts

First, set the font-size of the html tag to set the rem base (placed in the page header)

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

Second, the specific sliding operation code

Window. onload = function () {var oDiv = document. getElementById ("wrap"); var aPages = oDiv. getElementsByClassName ("pages"); var aDots = document. getElementById ("dots "). getElementsByTagName ("span"); var winH = window. innerHeight; var tTime = 1; // set the height of each page and the zindex value for (var I = 0; I <aPages. length; I ++) {aPages [I]. style. height = winH + "px"; aPages [I]. style. zIndex = 1;} aPages [0]. style. zIndex = 3; aPages [1]. style. zIndex = 2; oDiv. style. height = winH + "px"; // drag the finger event (remove the default action) document. addEventListener ("touchmove", function (e) {e. preventDefault () ;}); var YStart = 0; var iNow = 0; // press the oDiv finger. addEventListener ("touchstart", function (e) {YStart = e. changedTouches [0]. clientY;}); // move your finger to oDiv. addEventListener ("touchmove", function (e) {disY = e. changedTouches [0]. clientY-YStart; // slide positive, slide negative}); // finger leaves oDiv. addEventListener ("touchend", function (e) {disY = e. changedTouches [0]. clientY-YStart; // positive downward direction, and negative if (Math. abs (disY)> winH/20) {// switch if (disY <0) {iNow ++ only when the sliding distance is greater than a certain value; if (iNow> = aDots. length) {iNow = 0;} aPages [0]. style. transform = "translateY (" +-winH + "px)"; doSlide ();} else {iNow --; if (iNow <0) {iNow = aDots. length-1;} aPages [0]. style. transform = "translateY (" + winH + "px)"; doSlide ("up") ;}}); function doSlide (upflag) {for (var I = 0; I <aDots. length; I ++) {aDots [I]. className = "";} aDots [iNow]. className = "now"; if (upflag) {// slide up aPages [3]. style. zIndex = 2; aPages [1]. style. zIndex = 1; oDiv. insertBefore (aPages [3], aPages [1]); setTimeout (function () {aPages [1]. style. transform = "translateY (0px)"; aPages [1]. style. zIndex = 2; aPages [0]. style. zIndex = 3 ;}, 300)} else {setTimeout (function () {aPages [0]. style. transform = "translateY (0px)"; aPages [0]. style. zIndex = 1; aPages [1]. style. zIndex = 3; aPages [2]. style. zIndex = 2; oDiv. appendChild (aPages [0]) ;}, 300 )}}}

Now, I want to share with you a simple piece of code. JS implements full-page slide display on mobile terminals. The specific code is as follows:

<! DOCTYPE html> 
Summary
The above is the sample code for JavaScript to implement full screen sliding on mobile terminals. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!