Heim > Artikel > Web-Frontend > js imitiert den Vorgang, den Kontakt nach links zu schieben und die Löschtaste in QQ herauszuziehen

js imitiert den Vorgang, den Kontakt nach links zu schieben und die Löschtaste in QQ herauszuziehen

不言Original: 2018-06-25 16:49:201890Durchsuche

In diesem Artikel wird hauptsächlich der Vorgang des Verschiebens des Kontakts nach links und des Herausschiebens der Löschtaste in js vorgestellt, der QQ nachahmt, dh das Schreiben eines js-Plug-Ins zum Verschieben nach links, um interaktive Effekte zu löschen

Das Beispiel in diesem Artikel soll Ihnen den Vorgang vorstellen, der dem von Kontakten in QQ ähnelt: nach links schieben und die Löschtaste herausziehen. Wenn Sie es loslassen, wenn es mehr als zur Hälfte verschoben ist, rutscht es automatisch nach unten. Wenn Sie es loslassen, wenn es weniger als zur Hälfte entfernt ist, kehrt es in die ursprüngliche Position zurück.

Reine js-Implementierung
Verwendet h5 touchmove und andere Ereignisse und verwendet js, um das CSS3-Übersetzungsattribut dynamisch zu ändern, um Animationseffekte zu erzielen:

<!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>

In Zepto-Plug-in umgewandelt
In tatsächlichen Projekten können wir diese Funktion an vielen Stellen verwenden. Jetzt werden wir diese Funktion zur späteren einfacheren Verwendung in ein Zepto-Plug-In umwandeln.

Für dieses Plug-in implementieren wir nur diese Funktion und übergeben dann die Parameter (den Stilnamen der Löschschaltfläche), damit das Programm den erforderlichen Gleitabstand in js für eine einfache Wiederverwendung berechnen kann.

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);

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>

Wirkung:

Anwendungswirkung in tatsächlichen Projekten:

Fehler beseitigen
Mit dem obigen Schritt haben wir im Grunde die Funktionen erreicht, die wir benötigen. Aber hat mehrere Probleme:

1. Das Klicken auf die Schaltfläche „Löschen“ auf der rechten Seite schlägt fehl, da die Spanne nicht bis zur großen Schaltfläche hochsprudeln kann >2. Ein sehr ernstes Problem. Wir haben das touchmove-Ereignis zu p hinzugefügt und das ursprüngliche Browser-Ereignis blockiert. Daher konnte die Seite nicht gescrollt werden, wenn p nach oben oder unten verschoben wurde.

Das erste Problem ist einfacher zu lösen und schreiben „delete“ in :before in CSS, etwa so:

.itemWipe .item-delete:before {
  content: &#39;删除&#39;;
  color: #fff;
}

Für das zweite Problem soll das Internet iscroll verwenden, um es zu lösen. Hier beziehen wir uns auf die gleitende Bedienung von Kontakten im mobilen QQ.

Allgemeines Prinzip: Bestimmen Sie zu Beginn des Gleitens, ob sich die Y-Achse oder die X-Achse stärker bewegt. Wenn die Bewegung der Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

JS implementiert die Funktion, auf dem mobilen Endgerät nach links zu schieben, um die Löschschaltfläche anzuzeigen

jQuery und CSS3 implementieren eine Nachahmung des Petal Net-Navigationsmenüs mit fester Top-Position und schwebendem Effekt

Das obige ist der detaillierte Inhalt vonjs imitiert den Vorgang, den Kontakt nach links zu schieben und die Löschtaste in QQ herauszuziehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css css3 html JS 事件 bug

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery und CSS3 realisieren das Navigationsmenü mit fester oberer Position und schwebendem Effekt im nachgeahmten BlütenblattnetzwerkNächster Artikel：jQuery und CSS3 realisieren das Navigationsmenü mit fester oberer Position und schwebendem Effekt im nachgeahmten Blütenblattnetzwerk

In Verbindung stehende Artikel

Mehr sehen