JS实现移动端整屏滑动的实例代码

基本思路：

1）检测手指滑动方向：获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了

2）手指抬起后，向对应反向操作改变当前页的位置

具体代码如下：

html

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


  

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分为两块

第一，设置html标签的font-size，以便设置rem的基数 （放在页面头部）

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

第二，具体的滑动操作代码

 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;
      //设置每页的高度和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

好了，在给大家分享一段简单的代码，JS实现移动端整页滑屏示，具体代码如下所示：



  
    
    
    
    
    
    
    
    
      * {
 padding: 0;
 margin: 0;
 font-family: Verdana;
      }
      body,
      html {
 height: 100%;
 background-color: #000000;
      }
      .wrap {
 width: 100%;
 height: 100%;
 overflow: hidden;
      }
      .wrap2 {
 width: 100%;
 height: 1000%;
 transition: 0.3s linear
      }
      .page {
 width: 100%;
 height: 10%
      }
      .page {
 background-color: #fdfdfd;
 font-size: 100px;
 line-height: 400px;
 text-align: center;
 font-weight: bold;
      }
    
  
  
    
      
 1
 2
 3
 4
 5
 6
      
    
    
  


总结
以上所述是小编给大家介绍的JS实现移动端整屏滑动的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！