So implementieren Sie mithilfe von HTML, CSS und jQuery die erweiterte Schiebefunktion zum Löschen von Listenelementen-js-Tutorial-php.cn

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

WBOY

Freigeben： 2023-10-24 09:30:35

Original

1348 Leute haben es durchsucht

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.

HTML-Struktur erstellen

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

) erreicht werden.
```
<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ...
</ul>
```
Nach dem Login kopieren
1. 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。同时，我们还定义了一个“删除”按钮的样式。
1. 使用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
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: 🎜

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!