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
Vue implementiert dynamische Routingdetails
Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...
Einführung in das Batch-Cache-Löschskript von nginx proxy_cache
Vorwort: Ich habe zuvor den offiziellen Proxy-Cac...
503 Dienst nicht verfügbar Fehlerlösungserklärung
1. Beim Öffnen der Webseite wird die Meldung „503...
Tutorial zur Installation und Verwendung von Docker MQTT
Einführung in MQTT MQTT (Message Queuing Telemetr...
Kapselungsmethode der Vue-Breadcrumbs-Komponente
Vue kapselt die Breadcrumb-Komponente zu Ihrer In...
Verwendung des Linux-Befehls passwd
1. Befehlseinführung Mit dem Befehl passwd werden...
Ubuntu startet den Remote-Anmeldevorgang des SSH-Dienstes
SSH-Secure-Shell, ermöglicht sichere Remote-Anmel...
Lösung für das Problem der großen Schriftgröße auf iPhone-Geräten in WAP-Seiten
Wenn Sie keine Javascript-Steuerung verwenden möch...
Detaillierte Erläuterung der Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten in Vue3
Inhaltsverzeichnis Erste Methode App.vue Startsei...
Das Installationstutorial zu mysql5.5.28 ist super detailliert!
mysql5.5.28 Installations-Tutorial zu Ihrer Infor...
So ändern Sie die Standardübermittlungsmethode des Formulars
Die Standard-Übermittlungsmethode von HTML ist get...
Upgrade von MySQL 5.1 auf 5.5.36 in CentOS
Dieser Artikel beschreibt den Upgrade-Prozess von...
Erfahren Sie, wie Sie mithilfe des Nginx-Dienstes eine Subdomain-Umgebung erstellen, um die Ladeleistung von 2D-Karten zu verbessern.
1. Hintergrund Vor kurzem stießen einige Freunde ...
Spezifische Verwendung globaler Variablen von node.js
Globales Objekt Alle Module können aufgerufen wer...
Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen
Inhaltsverzeichnis Fremdschlüssel So ermitteln Si...