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

Heim

Web-Frontend

js-Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 24, 2023 am 09:30 AM

css jquery html Schieben Sie zu löschen

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>
```
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;
}
```
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();
  });
});
```
在上述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!

Erklärung dieser Website

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

Heiße KI -Werkzeuge

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

So retten Sie alle 4 <🎜> Kinder in 99 Nächten im Wald

1 Monate vor By DDD

Wie man freie Diamanten in 99 Nächten im Wald bekommt

1 Monate vor By DDD

Windows 11 KB5062660 24H2 mit Funktionen, direkte Download -Links für Offline -Installateur (.msu)

4 Wochen vor By Jack chen

PHP nennt AI intelligente Sprachassistenten PHP Voice Interaction System Construction

3 Wochen vor By

<🎜> Gigantamax Journey Timed Research Quest Schritte und Code

3 Wochen vor By Jack chen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial

1535

276

Related knowledge

So ändern Sie den Listenstil in CSS Aug 17, 2025 am 10:04 AM

Um den CSS-Listenstil zu ändern, verwenden Sie zunächst den Typ Listenstil, um die Kugel- oder Nummerierungsstil zu ändern. 1. Verwenden Sie den Typ Listenstil, um die Kugel von UL auf Scheibe, Kreis oder Quadrat einzustellen, und die Anzahl der OL ist dezimal, unter-alpha, obere Alpha, untere Röme oder Oberroman. 2. Entfernen Sie das Tag vollständig mit Listenstil: Keine. 3. Verwenden Sie das Listen-Stil: URL ('bullet.png'), um es durch ein benutzerdefiniertes Bild zu ersetzen. 4. Verwenden Sie Listen-Stil-Positionen: in

Warum wird mein HTML -Bild nicht angezeigt? Aug 16, 2025 am 10:08 AM

Überprüfen Sie zunächst, ob der SRC -Attributpfad korrekt ist, und stellen Sie sicher, dass der relative oder absolute Pfad mit dem Speicherort der HTML -Datei übereinstimmt. 2. Überprüfen Sie, ob der Dateiname und die Erweiterung korrekt geschrieben sind und fallsempfindlich sind. 3. bestätigen Sie, dass die Bilddatei tatsächlich im angegebenen Verzeichnis vorliegt. 4. Verwenden Sie geeignete ALT -Attribute und stellen Sie sicher, dass das Bildformat .jpg, .png, .gif oder .webp ist, das vom Browser weit verbreitet ist; 5. Fehlerbehebung bei Browser -Cache -Problemen, versuchen Sie, die Aktualisierung zu erzwingen oder direkt auf die Bild -URL zuzugreifen. 6. Überprüfen Sie die Berechtigungseinstellungen der Server, um sicherzustellen, dass die Datei gelesen und nicht blockiert werden kann. 7. Stellen Sie sicher, dass die IMG -Tag -Syntax korrekt ist, einschließlich der richtigen Zitate und der Attributreihenfolge, und schließlich beheben Sie 404 Fehler oder Syntaxprobleme über die Browser -Entwickler -Tools, um sicherzustellen, dass das Bild normal angezeigt wird.

So erstellen Sie eine gepunktete Grenze in CSS Aug 15, 2025 am 04:56 AM

Verwenden Sie CSS, um gepunktete Grenzen zu erstellen, und stellen Sie einfach das Grenzattribut auf gepunktete fest. Zum Beispiel kann "Border: 3PXDotted#000" dem Element einen 3-Pixel-schwarzen Punktrand hinzufügen. Durch die Einstellung der Randbreite kann die Größe des Punktes geändert werden. Die breiteren Grenzen erzeugen größere Punkte. Sie können gepunktete Grenzen für eine bestimmte Seite festlegen, z. B. "Border-Top: 2PXDottedRed". Gepunktete Grenzen eignen sich für Elemente auf Blockebene wie Div und Eingabe. Sie werden häufig in Fokuszuständen oder bearbeitbaren Bereichen verwendet, um die Zugänglichkeit zu verbessern. Achten Sie auf Farbkontrast. Gleichzeitig präsentiert Dotted eine kreisförmige Punktform. Diese Funktion wird in allen Mainstream -Browsern häufig verwendet.

So verwenden Sie das Adress -Tag in HTML Aug 15, 2025 am 06:24 AM

ThetagisusedTodeFineContactinformationForteAuthorOrOrofadocumentorsection; 1. UseSeitemail, Physicaladdress, PhoneNumber, OrwebsiteurlwithinanArticleOrbody; 2.PlaTITInsideForAuthorContactorinfordocument-Widecontactactactactactactactactactactactactactactactactactactactactacleorbody

So verwenden Sie das BDO -Tag, um die Textrichtung in HTML zu überschreiben Aug 16, 2025 am 09:32 AM

ThebdotagisusedTooverridethebrowrossersDefaultTextDirectionRenderingwhendealingWithmixedleft-to-Rightandright-to-Links-text-CorrectvisualDisplayByforcingaspecificDirectionusectionThedIrAttributeWithvalues "ltr" oder "rtl", asdemonstrattribute

Wie man den Cursor in CSS ändert Aug 16, 2025 am 05:00 AM

UseBuilt-Incursortypes LikePointer, Hilfe, Ornot-allowedtoprovideimmediatevisualFeedbackfordFerentIntiveRections.2.ApplyCustomCursorimagesWithTheCursorPropertyuSeusions, optionalSpecifingAtaTandalwayssincludingafallbacklikeAumAntoorPointer.fol

So verwenden Sie das :: vor und :: nach Pseudoelementen in CSS Aug 14, 2025 pm 08:25 PM

:: vor und :: nach pseudoelementen muss Inhalte über das Inhaltsattribut einfügen, und selbst wenn sie leer sind, müssen sie definiert werden. 2. Sie werden oft verwendet, um dekorative Symbole, Tooltips oder klare schwimmende hinzuzufügen und durch CSS visuelle Effekte zu erzeugen. 3. Die Positionierung und die Stilregelung können mit Attributen wie Position und Anzeige kombiniert werden und unterstützt Animation und Transformation. 4. Es sollte vermieden werden, direkt für leere Elemente wie IMG oder Eingabe zu verwenden, und der generierte Inhalt kann nicht von Bildschirmlesern ausgewählt oder gelesen werden, sodass er nicht zum Anzeigen von Schlüsselinformationen verwendet wird.

So verwenden Sie die Grid-Auto-Flow-Eigenschaft in CSS Aug 14, 2025 pm 09:26 PM

Der Standardwert von Grid-Auto-Flow ist Zeile, was bedeutet, in Zeilenreihenfolge angeordnet zu werden und eine neue Zeile zu erstellen, wenn die Zeile voll ist. 2. Wenn Sie auf die Spalte gesetzt sind, priorisieren Sie die Spalte. Erstellen Sie eine neue Spalte, nachdem die Spalte voll ist und muss mit Gitter-Autokalumn verwendet werden. 3. Das Hinzufügen des Schlüsselworts der Dichte kann eine enge Anordnung ermöglichen und versucht, die vorangegangenen Lücken zu füllen, es kann jedoch die Zugänglichkeit beeinflussen. Diese Eigenschaft betrifft nur Gitterelemente, die nicht explizit positioniert sind und in Kombination mit Gitter-Autototen oder Raster-Auto-Säulen verwendet werden sollten, um die implizite Spurgröße zu steuern, und eignet sich für die automatische Anordnung in dynamischen oder reaktionsschnellen Layouts.

See all articles