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
Ist MySQL eine relationale Datenbank?
MySQL ist ein relationales Datenbankverwaltungssy...
Beispielcode zum Festlegen des Beschriftungsstils mithilfe des CSS-Selektors
CSS-Selektoren Durch Festlegen des Stils für das ...
JavaScript imitiert den Taobao-Lupeneffekt
In diesem Artikel wird der spezifische Code für J...
So verwenden Sie CSS-Attribute, um Mausereignisse zu blockieren (Mausklicks können obere Elemente durchdringen)
Ursprung: Vor einigen Tagen hat ein Tester eine A...
Lösung für die hohe CPU-Auslastung des Tomcat-Prozesses
Inhaltsverzeichnis Fall Kontextwechsel-Overhead? ...
Der Button ist im IE auf beiden Seiten gestreckt
Wenn Sie Schaltflächen (Eingabe, Schaltfläche) sch...
So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine temporären Dateien erstellt werden können
Problembeschreibung Ich hatte kürzlich ein Proble...
Methoden und Schritte zur Verwendung von http-Proxy-Middleware zur domänenübergreifenden Implementierung von Proxy in Node
Inhaltsverzeichnis 1. Installieren Sie das Proxy-...
Reines CSS, um bei der Textbeschreibung einen halbtransparenten Effekt zu erzielen, wenn die Maus darauf platziert wird (unbedingt für Anfänger lesen)
Die Wirkung ist wie folgt: Beispiel 1 Beispiel 2:...
JavaScript realisiert den Effekt der mobilen Modalbox
In diesem Artikelbeispiel wird der spezifische Ja...
Lösung für das Jitter-Problem beim CSS3-Transformationsübergang
transform: scale(); Skalierung verursacht Jitter ...
Detaillierte Erläuterung der Grundkenntnisse zur Front-End-Komponentenbildung
Inhaltsverzeichnis Grundlegende Konzepte von Komp...
8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten
<br />Es gibt zwar viele Tools zum Erstellen...
Detaillierte Analyse von MySQL-Ausführungsplänen
Vorwort Als wir im vorherigen Interviewprozess na...
Implementierungsschritte zum Erstellen einer MySQL Master-Slave-Replikationsumgebung basierend auf Docker
1. Einleitung Die bisherige Programmarchitektur k...