jQuery-Plugin zum Erreichen einer Bildunterbrechung
|
In diesem Artikel wird der spezifische Code des jQuery-Plug-Ins zur Realisierung der Bildunterbrechung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Ein sehr häufiger Effekt besteht darin, dass das Bild schwebt und nach dem Klicken angezeigt wird. Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Das Bild schweben lassen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
* {
Rand: 0px;
Polsterung: 0px;
Benutzerauswahl: keine;
}
ul {
Rand links: 20px;
}
ul li{
Breite: 200px;
}
li img {
Breite: 100 %;
}
.schweben{
Position: fest;
oben: 10 %;
links: 10%;
Breite: 80%;
Listenstil: keiner;
Z-Index: 99;
}
.float::vor{
Inhalt: '';
Position: fest;
Breite: 100 %;
Höhe: 100%;
links: 0;
oben: 0;
Z-Index: 98;
}
</Stil>
</Kopf>
<Text>
<ul>
<li class="li"><img src="img/1.png" /></li>
<li Klasse="li"><img src="img/2.png" /></li>
<li class="li"><img src="img/3.png" /></li>
<li class="li"><img src="img/4.png" /></li>
</ul>
</body>
</html>
<Skript>
$(".li").klick(function() {
$(diese).toggleClass('float')
})
</Skript>Erklärung der IdeenEs geht um den Wechsel von einem Zustand in einen anderen, um das Geben und Wegnehmen einer Klasse. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung des Linux-Textverarbeitungsbefehls sort
>>: Centos7.5 Konfiguration Java-Umgebung Installation Tomcat Erklärung
Artikel empfehlen
So implementieren Sie die domänenübergreifende API-Proxy-Weiterleitung über die Nginx-Proxy-Weiterleitungskonfiguration
Vorwort Bei der Webentwicklung sind häufig domäne...
Fügen Sie eine schwebende Eingabeaufforderung für das Kopfzeilensymbol in der ElementUI-Tabelle hinzu
In diesem Artikel wird hauptsächlich erläutert, w...
Detaillierte Erklärung zur Installation von PHP7 unter Linux
Wie installiere ich PHP7 unter Linux? 1. Installi...
So konfigurieren Sie SSL für den Koa2-Dienst
I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...
Führen Sie die Schritte zur Verwendung von mock.js im Vue-Projekt aus
Verwenden von mock.js im Vue-Projekt Auswahl des ...
Ursachen und Lösungen für Verzögerungen bei der MySQL-Master-Slave-Synchronisierung
Aus historischen Gründen basiert die MySQL-Replik...
Der derzeit bessere Weg, eine Auswahlliste mit allen Optionen zu erstellen, wenn diese ausgewählt/fokussiert sind
Während der Entwicklung bin ich auf eine solche An...
JavaScript realisiert den Warteschlangenstrukturprozess
Inhaltsverzeichnis 1. Warteschlangen verstehen 2....
Optimierte Aufzeichnung der Verwendung von IN-Datenvolumen in Mysql
Die MySQL-Versionsnummer ist 5.7.28. Tabelle A ha...
Einführung in die Stammverzeichniserweiterung unter Linux
1. Überprüfen Sie den Linux-Festplattenstatus df ...
Analyse von MySQL-Lock-Wait- und Deadlock-Problemen
Inhaltsverzeichnis Vorwort: 1. Verstehen Sie Lock...
Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt
Dieser Artikel zeigt ein Beispiel, wie CSS3 verwe...
Der eigentliche Prozess der Einbindung von Axios in das Projekt
Inhaltsverzeichnis Vorwort Vorteile der Axios-Kap...
Verwenden von jQuery zum Implementieren des Karusselleffekts
In diesem Artikel finden Sie den spezifischen Cod...
Detaillierte Erklärung des Codes zum Abfragen von Daten eines bestimmten Tages, Monats oder Jahres in MySQL
Heute Wählen Sie * aus Tabellenname, wobei to_day...