communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > le corps du texte

js imite l'opération consistant à faire glisser le contact vers la gauche et à faire glisser le bouton de suppression dans QQ

不言
Libérer： 2018-06-25 16:49:20
original
1912 Les gens l'ont consulté

Cet article présente principalement l'opération consistant à faire glisser le contact vers la gauche et à faire glisser le bouton de suppression dans js imitant QQ, c'est-à-dire à écrire un plug-in js pour glisser vers la gauche pour supprimer les effets interactifs. Les amis intéressés peuvent s'y référer.

L'exemple dans cet article est de partager avec vous le fonctionnement similaire à celui des contacts dans QQ : glisser vers la gauche et faire glisser vers l'extérieur le bouton supprimer. Si vous le relâchez lorsqu'il glisse à plus de la moitié, il glissera automatiquement vers le bas. Si vous le relâchez lorsqu'il est à moins de la moitié, il reviendra à sa position d'origine.

Implémentation Pure Js
Utilise h5 touchmove et d'autres événements, et utilise js pour modifier dynamiquement l'attribut de traduction CSS3 afin d'obtenir des effets d'animation :

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
 <title>html5向左滑动删除特效</title>
 <style>
 * {
  padding: 0;
  margin: 0;
  list-style: none;
 }
 
 header {
  background: #f7483b;
  border-bottom: 1px solid #ccc
 }
 
 header h2 {
  text-align: center;
  line-height: 54px;
  font-size: 16px;
  color: #fff
 }
 
 .list-ul {
  overflow: hidden
 }
 
 .list-li {
  line-height: 60px;
  border-bottom: 1px solid #fcfcfc;
  position: relative;
  padding: 0 12px;
  color: #666;
  background: #f2f2f2;
  -webkit-transform: translateX(0px);
 }
 
 .btn {
  position: absolute;
  top: 0;
  right: -80px;
  text-align: center;
  background: #ffcb20;
  color: #fff;
  width: 80px
 }
 </style>
 <script>
 /*
  * 描述：html5苹果手机向左滑动删除特效
  */
 window.addEventListener(&#39;load&#39;, function() {
  var initX; //触摸位置
  var moveX; //滑动时的位置
  var X = 0; //移动距离
  var objX = 0; //目标对象位置
  window.addEventListener(&#39;touchstart&#39;, function(event) {
   event.preventDefault();
   var obj = event.target.parentNode;
   if (obj.className == "list-li") {
    initX = event.targetTouches[0].pageX;
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   }
   if (objX == 0) {
    window.addEventListener(&#39;touchmove&#39;, function(event) {
     event.preventDefault();
     var obj = event.target.parentNode;
     if (obj.className == "list-li") {
      moveX = event.targetTouches[0].pageX;
      X = moveX - initX;
      if (X >= 0) {
       obj.style.WebkitTransform = "translateX(" + 0 + "px)";
      } else if (X < 0) {
       var l = Math.abs(X);
       obj.style.WebkitTransform = "translateX(" + -l + "px)";
       if (l > 80) {
        l = 80;
        obj.style.WebkitTransform = "translateX(" + -l + "px)";
       }
      }
     }
    });
   } else if (objX < 0) {
    window.addEventListener(&#39;touchmove&#39;, function(event) {
     event.preventDefault();
     var obj = event.target.parentNode;
     if (obj.className == "list-li") {
      moveX = event.targetTouches[0].pageX;
      X = moveX - initX;
      if (X >= 0) {
       var r = -80 + Math.abs(X);
       obj.style.WebkitTransform = "translateX(" + r + "px)";
       if (r > 0) {
        r = 0;
        obj.style.WebkitTransform = "translateX(" + r + "px)";
       }
      } else { //向左滑动
       obj.style.WebkitTransform = "translateX(" + -80 + "px)";
      }
     }
    });
   }

  })
  window.addEventListener(&#39;touchend&#39;, function(event) {
   event.preventDefault();
   var obj = event.target.parentNode;
   if (obj.className == "list-li") {
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
    if (objX > -40) {
     obj.style.WebkitTransform = "translateX(" + 0 + "px)";
     objX = 0;
    } else {
     obj.style.WebkitTransform = "translateX(" + -80 + "px)";
     objX = -80;
    }
   }
  })
 })
 </script>
</head>

<body>
 <header>
  <h2>消息列表</h2>
 </header>
 <section class="list">
  <ul class="list-ul">
   <li id="li" class="list-li">
    <p class="con">
     你的快递到了，请到楼下签收
    </p>
    <p class="btn">删除</p>
   </li>
   <li class="list-li">
    <p class="con">
     哇，你在干嘛，快点来啊就等你了
    </p>
    <p class="btn">删除</p>
   </li>
  </ul>
 </section>
</body>

</html>
Copier après la connexion

Transformé en plug-in zepto
Dans des projets réels, nous pouvons l'utiliser dans de nombreux endroits Fonction . Nous allons maintenant transformer cette fonction en plug-in zepto pour une utilisation facile plus tard.

Pour ce plug-in, nous implémentons uniquement cette fonction, puis transmettons les paramètres (le nom du style du bouton de suppression) pour permettre au programme de calculer la distance de glissement requise en js pour une réutilisation facile.

zepto.touchWipe.js

/**
 * zepto插件：向左滑动删除动效
 * 使用方法：$(&#39;.itemWipe&#39;).touchWipe({itemDelete: &#39;.item-delete&#39;});
 * 参数：itemDelete 删除按钮的样式名
 */
;
(function($) {
 $.fn.touchWipe = function(option) {
  var defaults = {
   itemDelete: &#39;.item-delete&#39;, //删除元素
  };
  var opts = $.extend({}, defaults, option); //配置选项

  var delWidth = $(opts.itemDelete).width();

  var initX; //触摸位置
  var moveX; //滑动时的位置
  var X = 0; //移动距离
  var objX = 0; //目标对象位置
  $(this).on(&#39;touchstart&#39;, function(event) {
   event.preventDefault();
   var obj = this;
   initX = event.targetTouches[0].pageX;
   objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   if (objX == 0) {
    $(this).on(&#39;touchmove&#39;, function(event) {
     event.preventDefault();
     var obj = this;
     moveX = event.targetTouches[0].pageX;
     X = moveX - initX;
     if (X >= 0) {
      obj.style.WebkitTransform = "translateX(" + 0 + "px)";
     } else if (X < 0) {
      var l = Math.abs(X);
      obj.style.WebkitTransform = "translateX(" + -l + "px)";
      if (l > delWidth) {
       l = delWidth;
       obj.style.WebkitTransform = "translateX(" + -l + "px)";
      }
     }
    });
   } else if (objX < 0) {
    $(this).on(&#39;touchmove&#39;, function(event) {
     event.preventDefault();
     var obj = this;
     moveX = event.targetTouches[0].pageX;
     X = moveX - initX;
     if (X >= 0) {
      var r = -delWidth + Math.abs(X);
      obj.style.WebkitTransform = "translateX(" + r + "px)";
      if (r > 0) {
       r = 0;
       obj.style.WebkitTransform = "translateX(" + r + "px)";
      }
     } else { //向左滑动
      obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
     }
    });
   }

  })
  $(this).on(&#39;touchend&#39;, function(event) {
   event.preventDefault();
   var obj = this;
   objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
   if (objX > -delWidth / 2) {
    obj.style.transition = "all 0.2s";
    obj.style.WebkitTransform = "translateX(" + 0 + "px)";
    obj.style.transition = "all 0";
    objX = 0;
   } else {
    obj.style.transition = "all 0.2s";
    obj.style.WebkitTransform = "translateX(" + -delWidth + "px)";
    obj.style.transition = "all 0";
    objX = -delWidth;
   }
  })

  //链式返回
  return this;
 };

})(Zepto);
Copier après la connexion

touchWipe.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>html5向左滑动删除特效</title>

<style>
  *{ padding:0; margin:0; list-style: none;}
  header{ background: #f7483b; border-bottom: 1px solid #ccc}
  header h2{ text-align: center; line-height: 54px; font-size: 16px; color: #fff}
  .list-ul{ overflow: hidden}
  .list-li{ line-height: 60px; border-bottom: 1px solid #fcfcfc; position:relative;padding: 0 12px; color: #666;
    background: #f2f2f2;
    -webkit-transform: translateX(0px);
  }
  .btn{ position: absolute; top: 0; right: -80px; text-align: center; background: #ffcb20; color: #fff; width: 80px}
</style>

</head>
<body>
<header>
  <h2>消息列表</h2>
</header>
<section class="list">
  <ul class="list-ul">
    <li id="li" class="list-li">
      <p class="con">
        你的快递到了，请到楼下签收
      </p>
      <p class="btn">删除</p>
    </li>
    <li class="list-li">
      <p class="con">
        哇，你在干嘛，快点来啊就等你了
      </p>
      <p class="btn">删除</p>
    </li>
  </ul>
</section>

<p>X: <span id="X"></span></p>
<p>objX: <span id="objX"></span></p>
<p>initX: <span id="initX"></span></p>
<p>moveX: <span id="moveX"></span></p>

<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript" src="zepto.touchWipe.js"></script>
<script type="text/javascript">
  $(function() {
  $(&#39;.list-li&#39;).touchWipe({itemDelete: &#39;.btn&#39;});
  });

</script>
</body>
</html>
Copier après la connexion

Effet :

Effet d'application dans les projets réels :

Éliminer le BUG
En passant à l'étape ci-dessus, nous avons essentiellement réalisé les fonctions dont nous avons besoin. Mais a plusieurs problèmes :

1. Le bouton Supprimer à droite ne parvient pas à cliquer car la durée ne peut pas remonter jusqu'au gros bouton ; 2 . Un problème très sérieux. Nous avons ajouté l'événement touchmove à p et utilisé PreventDefault() pour bloquer l'événement de navigateur d'origine. En conséquence, la page ne pouvait pas défiler lorsque vous faisiez glisser p vers le haut ou vers le bas !

Le premier problème est plus facile à résoudre. Nous supprimons directement le span et écrivons "delete" dans :before en CSS, comme ceci : 

.itemWipe .item-delete:before {
  content: &#39;删除&#39;;
  color: #fff;
}
Copier après la connexion

Pour le deuxième problème, on dit en ligne qu'iscroll peut être utilisé pour le résoudre. Nous nous référons ici à l'opération coulissante des contacts dans QQ mobile.

Principe général : Au début du glissement, déterminez si l'axe Y bouge davantage ou si l'axe X bouge davantage. Si le mouvement sur l'axe X est important, il est considéré comme une opération de suppression glissante, et nous utilisons ensuite PreventDefault();

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile pour. tout le monde apprend. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !

Recommandations associées :

JS implémente la fonction de glissement vers la gauche sur le terminal mobile pour afficher le bouton de suppression


jQuery et CSS3 implémentent un menu de navigation en position supérieure fixe imitation Petal Net avec effet flottant


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：
js向左滑动 js滑出删除按钮 js联系人删除按钮 js仿QQ联系人删除操作
source：php.cn
Article précédent：jQuery et CSS3 réalisent le menu de navigation avec une position supérieure fixe et un effet flottant dans le réseau de pétales d'imitation Article suivant：Analyse de l'entrée du fichier d'amorçage de l'artefact de téléchargement de fichier JS
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
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...
Depuis 2024-04-04 20:25:22
0
1
330
Comment faire une barre latérale réduite ? Je ne parviens pas à déplacer le contenu principal vers la gauche. Lorsque je clique sur l...
Depuis 2024-04-02 10:02:05
0
2
347
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal