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
Eine kurze Analyse des Zustandsverständnisses von React
Wie definiert man komplexe Komponenten (Klassenko...
Detaillierte Analyse der untergeordneten und übergeordneten Vue-Komponenten
Inhaltsverzeichnis 1. Übergeordnete Komponenten u...
Docker-Installation von RocketMQ und Lösungen für während der Installation aufgetretene Probleme
Inhaltsverzeichnis Ziehen Sie das Rocketmq-Image ...
SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)
[LeetCode] 177.N-höchstes Gehalt Schreiben Sie ei...
Vue Shuttle-Box ermöglicht Auf- und Abbewegung
In diesem Artikelbeispiel wird der spezifische Co...
So installieren und konfigurieren Sie GitLab unter Ubuntu 20.04
einführen GitLab CE oder Community Edition ist ei...
Einführung in die HTML-Formularsteuerung deaktivierte Attribute schreibgeschützt VS deaktiviert
Es gibt zwei Möglichkeiten, die Formularübermittl...
Beispiel für einen SQL-Seriennummernerfassungscode
In diesem Artikel wird hauptsächlich das Beispiel...
Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7
1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....
Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite
Früher hatte fast jede Website eine Sitemap-Seite...
JavaScript zur Implementierung eines einfachen Einkaufsformulars
In diesem Artikel wird der spezifische JavaScript...
Zusammenfassung der Formulardesigntechniken im Webdesign
„Eingaben sollten in logische Gruppen unterteilt ...
Abfrage der Daten des Tages vor dem aktuellen Zeitintervall in MySQL
1. Hintergrund In tatsächlichen Projekten stoßen ...
Umfassende Inventarisierung wichtiger Logdateien in MySQL
Inhaltsverzeichnis Einführung Protokollklassifizi...
Lösung für das Problem, dass das direkte Festlegen der Breite und Höhe eines Hyperlinks nicht funktioniert
Eine direkte Verwendung von Breite und Höhe ist ni...