So implementieren Sie mithilfe von HTML, CSS und jQuery die erweiterte Schiebefunktion zum Löschen von Listenelementen

So verwenden Sie HTML, CSS und jQuery, um die erweiterte Funktion des Schiebens zum Löschen von Listenelementen zu implementieren

In der modernen Webentwicklung ist das Schieben zum Löschen eine gängige Benutzerinteraktionsfunktion, mit der Benutzer Listenelemente durch Schiebegesten löschen können. In diesem Artikel wird erläutert, wie Sie HTML, CSS und jQuery zum Implementieren dieser erweiterten Funktionalität verwenden, und es werden spezifische Codebeispiele bereitgestellt.

1. HTML-Struktur erstellen

Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, um Listenelemente anzuzeigen. Dies kann durch ungeordnete Listen (

) und Listenelemente (
• ) erreicht werden.

  <ul id="list">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
  </ul>

  Nach dem Login kopieren
  2. CSS-Stile hinzufügen

  Um den gleitenden Löscheffekt zu erzielen, müssen wir CSS verwenden, um die Listenelemente zu formatieren, und einige CSS-Animationseffekte verwenden, um den gleitenden Effekt zu erzielen.

  li {
    position: relative;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
  }
  
  li.slideout {
    transition: all 0.3s ease-out;
    transform: translateX(0);
  }
  
  li.sliding {
    transition: all 0.3s ease-out;
  }
  
  li.delete {
    background: #ff4f4f;
    color: #fff;
  }
  
  .li-delete-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background: #ff4f4f;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  Nach dem Login kopieren

  Im obigen CSS-Code haben wir den Grundstil der Listenelemente festgelegt und auch einige Klassennamen definiert, die sich auf Animationseffekte beziehen, wie z. B. .slideout, .sliding und .delete. Gleichzeitig definieren wir auch den Stil eines „Löschen“-Buttons. .slideout、.sliding和.delete。同时，我们还定义了一个“删除”按钮的样式。

  3. 使用jQuery实现滑动删除效果

  接下来，我们需要使用jQuery来实现滑动删除的效果。我们可以通过在li元素上绑定事件来实现。

  $(document).ready(function() {
    var sliding = false;
    var startX = 0;
    var deltaX = 0;
    var threshold = 50;
  
    $('#list li').on('touchstart', function(event) {
      startX = event.originalEvent.touches[0].pageX;
      deltaX = 0;
    });
  
    $('#list li').on('touchmove', function(event) {
      if (sliding) {
        deltaX = event.originalEvent.touches[0].pageX - startX;
        if (deltaX < -threshold) {
          $(this).addClass('sliding');
        } else if (deltaX > threshold) {
          $(this).removeClass('sliding');
        }
        event.preventDefault();
      }
    });
  
    $('#list li').on('touchend', function(event) {
      sliding = false;
      if (deltaX < -threshold) {
        $(this).addClass('slideout');
      } else if (deltaX > threshold) {
        $(this).removeClass('sliding');
      }
    });
  
    $('.li-delete-btn').on('click', function(event) {
      $(this).closest('li').addClass('delete');
      $(this).closest('li').slideUp(300).remove();
    });
  });

  Nach dem Login kopieren

  在上述jQuery代码中，我们绑定了以下事件：

  • touchstart：当触摸开始时记录起始位置；
  • touchmove：在滑动过程中更新位置，并根据滑动距离判断是否进行滑动删除的动画；
  • touchend：当触摸结束时根据滑动距离判断是否进行滑动删除的动画；
  • click
  Verwenden Sie jQuery, um den gleitenden Löscheffekt zu erzielen.
  Als nächstes müssen wir jQuery verwenden, um den gleitenden Löscheffekt zu erzielen. Wir können dies tun, indem wir Ereignisse an das li-Element binden.

  rrreee

  Im obigen jQuery-Code haben wir die folgenden Ereignisse gebunden: 🎜
  🎜touchstart: Zeichnen Sie die Startposition auf, wenn die Berührung beginnt; 🎜🎜touchmove: Aktualisieren Sie die Position während des Gleitvorgangs und bestimmen Sie, ob eine Gleitlöschanimation basierend auf der Gleitentfernung ausgeführt werden soll. 🎜🎜touchend: Wenn die Berührung endet, bestimmen Sie, ob eine Gleitlöschanimation basierend auf der Gleitentfernung ausgeführt werden soll ; 🎜🎜 click: Löschanimation ausführen, wenn auf die Schaltfläche „Löschen“ geklickt wird. 🎜🎜🎜Zu diesem Zeitpunkt haben wir die erweiterte Schiebefunktion zum Löschen von Listenelementen mithilfe von HTML, CSS und jQuery abgeschlossen. Benutzer können ein oder mehrere Listenelemente durch Schiebegesten löschen, um die Daten bequemer zu verwalten. Durch den flexiblen Einsatz von HTML, CSS und jQuery können wir verschiedene einzigartige Benutzerinteraktionseffekte und -funktionen erzielen und das Benutzererlebnis von Webanwendungen verbessern. 🎜🎜Hinweis: Der obige Code ist nur ein Beispiel und muss entsprechend den spezifischen Anforderungen für die tatsächliche Verwendung geändert und optimiert werden. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mithilfe von HTML, CSS und jQuery die erweiterte Schiebefunktion zum Löschen von Listenelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!