How to implement full-screen sliding on mobile terminals with JS

This article uses example code to share with you the full-screen sliding effect on mobile based on js. The basic idea is to detect the sliding direction of the finger, obtain the position when the finger is lifted, and subtract the position when the finger is pressed. The correct result is the direction. After sliding down, this article will share with you the example code of JS to realize full screen sliding on the mobile terminal.

Basic idea:

1) Detect the finger sliding direction: get the position when the finger is lifted, subtract the position when the finger is pressed , getting it right means sliding down

2) After lifting the finger, change the position of the current page in the corresponding reverse operation

The specific code is as follows:

html

 
第一屏
 
第二屏
 
第三屏
 
第四屏
 
 
  

css

*{ margin:0; padding:0; } body{ overflow: hidden; } #wrap > p{ 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 in order to set the base of rem (put in Page header)

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

Second, the specific sliding operation code

window.onload = function(){ var op = document.getElementById("wrap"); var aPages = op.getElementsByClassName("pages"); var aDots = document.getElementById("dots").getElementsByTagName("span"); var winH = window.innerHeight; var tTime = 1; //设置每页的高度和zindex值 for(var i=0; iwinH/20){ //只有当滑动距离大于了一定值得时候，才执行切换 if(disY<0){ iNow++; 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
        

         Copy after login
        
       

Okay, let me share with you a simple code to implement full-page sliding on the mobile side with JS Screen display, the specific code is as follows:

           
  
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
   

Related recommendations:

Example of how to implement left and right sliding using CSS on the mobile terminal

WeChat applet implements the effect of sliding to the left to delete

News sliding special effects implementation code at the bottom of JS (imitation of Vanke)

The above is the detailed content of How to implement full-screen sliding on mobile terminals with JS. For more information, please follow other related articles on the PHP Chinese website!