JS如何实现移动端整屏滑动-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

JS如何实现移动端整屏滑动

May 14, 2018 am 10:25 AM

javascript slaid

本文通过实例代码给大家分享了基于js 实现移动端整屏滑动效果，基本思路是检测手指滑动方向，获取手指抬起时的位置，减去手指按下时的位置，得正即为向下滑动了，本文就和大家分享JS实现移动端整屏滑动的实例代码。

基本思路：

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

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

具体代码如下：

html

&lt;p id=&quot;wrap&quot;&gt;
  &lt;p id=&quot;page01&quot; class=&quot;pages&quot;&gt;第一屏&lt;/p&gt;
  &lt;p id=&quot;page02&quot; class=&quot;pages&quot;&gt;第二屏&lt;/p&gt;
  &lt;p id=&quot;page03&quot; class=&quot;pages&quot;&gt;第三屏&lt;/p&gt;
  &lt;p id=&quot;page04&quot; class=&quot;pages&quot;&gt;第四屏&lt;/p&gt;
&lt;/p&gt;
&lt;p id=&quot;dots&quot;&gt;
  &lt;span class=&quot;now&quot;&gt;&lt;/span&gt;&lt;span class=&quot;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;&quot;&gt;&lt;/span&gt;&lt;span class=&quot;&quot;&gt;&lt;/span&gt;
&lt;/p&gt;

Salin selepas log masuk

css

*{
      margin:0;
      padding:0;
    }
    body{
      overflow: hidden;
    }
    #wrap &gt; 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;
    }

Salin selepas log masuk

js分为两块

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

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

Salin selepas log masuk

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

window.onload = function(){
     var op = document.getElementById(&quot;wrap&quot;);
     var aPages = op.getElementsByClassName(&quot;pages&quot;);
     var aDots = document.getElementById(&quot;dots&quot;).getElementsByTagName(&quot;span&quot;);
     var winH = window.innerHeight;
     var tTime = 1;
     //设置每页的高度和zindex值
     for(var i=0; i&lt;aPages.length; i++){
       aPages[i].style.height = winH + &quot;px&quot;;
       aPages[i].style.zIndex = 1;
     }
     aPages[0].style.zIndex = 3;
     aPages[1].style.zIndex = 2;
     op.style.height = winH + &quot;px&quot;;
     //手指拖动事件（去除默认动作）
     document.addEventListener(&quot;touchmove&quot;,function(e){
       e.preventDefault();
     });
     var YStart = 0;
     var iNow = 0;
     //手指按下
     op.addEventListener(&quot;touchstart&quot;,function(e){
       YStart = e.changedTouches[0].clientY;
     });
     //手指移动
     op.addEventListener(&quot;touchmove&quot;,function(e){
       disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
     });
     //手指离开
     op.addEventListener(&quot;touchend&quot;,function(e){
       disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
       if(Math.abs(disY)&gt;winH/20){ //只有当滑动距离大于了一定值得时候，才执行切换
         if(disY&lt;0){
           iNow++;
           if(iNow&gt;=aDots.length){
             iNow = 0;
           }
           aPages[0].style.transform = &quot;translateY(&quot;+ -winH +&quot;px)&quot;;
           doSlide();
         }else{
           iNow--;
           if(iNow&lt;0){
             iNow = aDots.length-1;
           }
           aPages[0].style.transform = &quot;translateY(&quot;+ winH +&quot;px)&quot;;
           doSlide(&quot;up&quot;);
         }
       }
     });
     function doSlide(upflag){
       for(var i=0;i&lt;aDots.length;i++){
         aDots[i].className = &quot;&quot;;
       }
       aDots[iNow].className = &quot;now&quot;;
       if(upflag){
           //向上滑
           aPages[3].style.zIndex = 2;
           aPages[1].style.zIndex = 1;
           op.insertBefore(aPages[3],aPages[1]);
           setTimeout(function(){
             aPages[1].style.transform = &quot;translateY(0px)&quot;;
             aPages[1].style.zIndex = 2;
             aPages[0].style.zIndex = 3;
           },300)
       }else{
         setTimeout(function(){
           aPages[0].style.transform = &quot;translateY(0px)&quot;;
           aPages[0].style.zIndex = 1;
           aPages[1].style.zIndex = 3;
           aPages[2].style.zIndex = 2;
           op.appendChild(aPages[0]);
         },300)
       }
     }
   }

Salin selepas log masuk

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;/&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0&quot; /&gt;
    &lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot; /&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;mobile-web-app-capable&quot;&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot; /&gt;
    &lt;meta http-equiv=&quot;Cache-Control&quot; content=&quot;no-siteapp&quot; /&gt;
    &lt;title&gt;移动端整页滑屏示例&lt;/title&gt;
    &lt;style type=&quot;text/css&quot;&gt;
      * {
        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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p class=&quot;wrap&quot; id=&quot;wrap&quot;&gt;
      &lt;p class=&quot;wrap2&quot; id=&quot;wrap2&quot;&gt;
        &lt;p class=&quot;page&quot;&gt;1&lt;/p&gt;
        &lt;p class=&quot;page&quot; style=&quot;background-color:#dddddd;&quot;&gt;2&lt;/p&gt;
        &lt;p class=&quot;page&quot;&gt;3&lt;/p&gt;
        &lt;p class=&quot;page&quot; style=&quot;background-color:#dddddd;&quot;&gt;4&lt;/p&gt;
        &lt;p class=&quot;page&quot;&gt;5&lt;/p&gt;
        &lt;p class=&quot;page&quot; style=&quot;background-color:#dddddd;&quot;&gt;6&lt;/p&gt;
      &lt;/p&gt;
    &lt;/p&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
      //重要！禁止移动端滑动的默认事件
      document.body.addEventListener(&#39;touchmove&#39;, function(event) {
        event = event ? event : window.event;
        if(event.preventDefault) {
          event.preventDefault()
        } else {
          event.returnValue = false
        }
      }, false)
      var pages = function(obj) {
        var box = document.getElementById(obj.wrap);
        var box2 = document.getElementById(obj.wrap2);
        var len = obj.len;
        var n = obj.n;
        var startY, moveY, cliH;
        //获取屏幕高度
        var getH = function() {
          cliH = document.body.clientHeight
        };
        getH();
        window.addEventListener(&#39;resize&#39;, getH, false);
        //touchStart
        var touchstart = function(event) {
          if(!event.touches.length) {
            return;
          }
          startY = event.touches[0].pageY;
          moveY = 0;
        };
        //touchMove
        var touchmove = function(event) {
          if(!event.touches.length) {
            return;
          }
          moveY = event.touches[0].pageY - startY;
          box2.style.transform = &#39;translateY(&#39; + (-n * cliH + moveY) + &#39;px)&#39;; //根据手指的位置移动页面
        };
        //touchEnd
        var touchend = function(event) {
          //位移小于+-50的不翻页
          if(moveY &lt; -50) n++;
          if(moveY &gt; 50) n--;
          //最后&amp;最前页控制
          if(n &lt; 0) n = 0;
          if(n &gt; len - 1) n = len - 1;
          //重定位
          box2.style.transform = &#39;translateY(&#39; + (-n * 10) + &#39;%)&#39;; //根据百分比位置移动页面
          console.log(n)
        };
        //touch事件绑定
        box.addEventListener(&quot;touchstart&quot;, function(event) {
          touchstart(event)
        }, false);
        box.addEventListener(&quot;touchmove&quot;, function(event) {
          touchmove(event)
        }, false);
        box.addEventListener(&quot;touchend&quot;, function(event) {
          touchend(event)
        }, false);
      };
      pages({
        wrap: &#39;wrap&#39;, //.wrap的id
        wrap2: &#39;wrap2&#39;, //.wrap2的id
        len: 6, //一共有几页
        n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;