Maison > interface Web > js tutoriel > le corps du texte

Comment implémenter le glissement plein écran sur les terminaux mobiles avec JS

小云云
Libérer: 2018-05-14 10:25:48
original
3784 Les gens l'ont consulté

Cet article utilise un exemple de code pour partager avec vous comment réaliser l'effet de glissement plein écran sur le terminal mobile basé sur js. L'idée de base est de détecter la direction de glissement du doigt, d'obtenir la position lorsque le doigt est levé. , et soustrayez la position lorsque le doigt est enfoncé. Le résultat correct est la direction. Faites défiler vers le bas, cet article partagera avec vous l'exemple de code JS pour réaliser un glissement en plein écran sur le terminal mobile.

Idée de base :

1) Détecter la direction de glissement du doigt : obtenir la position lorsque le doigt est levé, soustraire la position lorsque le doigt est enfoncé, bien faire les choses signifie glisser vers le bas

2) Après avoir levé le doigt, changez la position de la page en cours dans l'opération inverse correspondante

Le code spécifique est le suivant :

html

<p id="wrap">
  <p id="page01" class="pages">第一屏</p>
  <p id="page02" class="pages">第二屏</p>
  <p id="page03" class="pages">第三屏</p>
  <p id="page04" class="pages">第四屏</p>
</p>
<p id="dots">
  <span class="now"></span><span class=""></span><span class=""></span><span class=""></span>
</p>
Copier après la connexion

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;
    }
Copier après la connexion

js est divisé en deux parties

Tout d'abord, définissez la taille de la police du balise html afin de définir la cardinalité rem (placée en tête de page)

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";
Copier après la connexion

Deuxièmement, le code spécifique de l'opération de glissement

 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; 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;
      op.style.height = winH + "px";
      //手指拖动事件(去除默认动作)
      document.addEventListener("touchmove",function(e){
        e.preventDefault();
      });
      var YStart = 0;
      var iNow = 0;
      //手指按下
      op.addEventListener("touchstart",function(e){
        YStart = e.changedTouches[0].clientY;
      });
      //手指移动
      op.addEventListener("touchmove",function(e){
        disY = e.changedTouches[0].clientY-YStart; //向下滑正,向上滑负
      });
      //手指离开
      op.addEventListener("touchend",function(e){
        disY = e.changedTouches[0].clientY-YStart; //向下滑正,向上滑负
        if(Math.abs(disY)>winH/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<aDots.length;i++){
          aDots[i].className = "";
        }
        aDots[iNow].className = "now";
        if(upflag){
            //向上滑
            aPages[3].style.zIndex = 2;
            aPages[1].style.zIndex = 1;
            op.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;
            op.appendChild(aPages[0]);
          },300)
        }
      }
    }
Copier après la connexion

Bon , permettez-moi de partager avec vous un code simple, JS implémente l'affichage sur écran coulissant pleine page sur le terminal mobile. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>移动端整页滑屏示例</title>
    <style type="text/css">
      * {
        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;
      }
    </style>
  </head>
  <body>
    <p class="wrap" id="wrap">
      <p class="wrap2" id="wrap2">
        <p class="page">1</p>
        <p class="page" style="background-color:#dddddd;">2</p>
        <p class="page">3</p>
        <p class="page" style="background-color:#dddddd;">4</p>
        <p class="page">5</p>
        <p class="page" style="background-color:#dddddd;">6</p>
      </p>
    </p>
    <script type="text/javascript">
      //重要!禁止移动端滑动的默认事件
      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 < -50) n++;
          if(moveY > 50) n--;
          //最后&最前页控制
          if(n < 0) n = 0;
          if(n > len - 1) n = len - 1;
          //重定位
          box2.style.transform = &#39;translateY(&#39; + (-n * 10) + &#39;%)&#39;; //根据百分比位置移动页面
          console.log(n)
        };
        //touch事件绑定
        box.addEventListener("touchstart", function(event) {
          touchstart(event)
        }, false);
        box.addEventListener("touchmove", function(event) {
          touchmove(event)
        }, false);
        box.addEventListener("touchend", function(event) {
          touchend(event)
        }, false);
      };
      pages({
        wrap: &#39;wrap&#39;, //.wrap的id
        wrap2: &#39;wrap2&#39;, //.wrap2的id
        len: 6, //一共有几页
        n: 0 //页面一打开默认在第几页?第一页就是0,第二页就是1
      });
    </script>
  </body>
</html>
Copier après la connexion

Recommandations associées :

Comment l'implémenter sur le terminal mobile en utilisant CSS Exemple de glissement vers la gauche et la droite

L'applet WeChat réalise un glissement vers la gauche pour supprimer l'effet

Nouveau code d'implémentation de l'effet de glissement en bas de JS (imitation Vanke)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal