Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken
|
Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken Code-Einführung: Die „Lightbox“ von CSS ist eine beliebte Bildanzeigetechnologie, die ein großes Bild anzeigen kann, ohne dass beim Anklicken eines kleinen Bilds eine Aktualisierung erfolgt. Das Discuz-Forum hat diese Funktion, aber es scheint, dass es auch JS verwendet. Dieses hier verwendet kein JS und ist vollständig mit reinem CSS implementiert. Es ist auch sehr bequem zu verwenden. Bitte beachten Sie, dass der Rahmen und die Größe des Bildes entsprechend dem Layout Ihrer Webseite eingestellt werden sollten. Dies ist nur eine Demonstration und ist möglicherweise nicht genau für Ihre Webseite geeignet. Codeinhalt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<title>Verwenden Sie CSS, um zu verhindern, dass Lightbox den Code zum Anzeigen großer Bilder ohne Aktualisierung beim Klicken auf kleine Bilder ausführt – www.webdm.cn</title>
<Stil>
.schwarzes_Overlay{
Anzeige: keine;
Position: absolut;
oben: 0%;
links: 0%;
Breite: 100 %;
Höhe: 100%;
Hintergrundfarbe: weiß;
z-Index: 1001;
-moz-Deckkraft: 0,8;
Deckkraft: 0,80;
Filter: Alpha (Deckkraft = 80);
}
.weißer_Inhalt {
Anzeige: keine;
Position: absolut;
oben: 25 %;
links: 25 %;
Breite: 46%;
Höhe: 50%;
Polsterung: 13px;
Rand: 16px durchgehend orange;
Hintergrundfarbe: weiß;
z-Index: 1002;
Überlauf: automatisch;
}
.codefans_net
{
Breite: 420px;
Höhe: 210px;
Hintergrundfarbe: #efefef;
Farbe: Nr. 666;
Rahmenbreite: 1px;
Rahmenfarbe: #999;
Rahmenstil: durchgezogen;
Rand: 6px;
Polsterung: 6px;
Schriftgröße: 14px;
Zeilenhöhe: 200 %;
Schwimmkörper:Müllhaufen;
}
</Stil>
</Kopf>
<Text>
<p class="codefans_net">CSS „Lightbox“ ist eine beliebte Bildanzeigetechnologie, die die Funktion realisieren kann, ein großes Bild anzuzeigen, ohne dass es beim Klicken auf ein kleines Bild aktualisiert wird. Wenn Sie diesen Effekt nicht ganz verstehen, können Sie auf das Bild unten klicken und Sie werden es verstehen! <br>
<a href = "javascript:void(0)" onclick = "document.getElementById
('hell').style.display='block';document.getElementById('verblassen').style.display='block'"><img border="0"
src="upload/2022/web/demoimgsmall.jpg" width="100" height="62"></a>
<div id="hell" class="weißer_Inhalt">
<a target="_blank" href="/">
<img border="0" src="upload/2022/web/demoimg.jpg" width="350" height="216"></a> <a href =
"javascript:void(0)" beim Klicken = "document.getElementById('light').style.display='none';document.getElementById
('fade').style.display='none'">Schließen</a></div>
<div id="fade" class="black_overlay"></div></p>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">Web Code Station</a> – Der professionellste Webcode-Download!
</p>Zusammenfassen Oben ist der Code, den ich Ihnen vorgestellt habe, indem ich CSS Anti-Lightbox verwende, um das große Bild anzuzeigen, ohne es zu aktualisieren, wenn Sie auf das kleine Bild klicken. Ich hoffe, er wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Der Designprozess des Logos zum Mittherbstfest von Alibaba in Kombination mit der Website
>>: Zusammenfassung der Spring Boot Docker-Verpackungstools
Artikel empfehlen
JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen
In diesem Artikel werden zwei Methoden zur Implem...
Wie wirkt sich der zusammengesetzte Index von MySQL aus?
Inhaltsverzeichnis Hintergrund Zusammengesetzte I...
W3C Tutorial (7): W3C XSL Aktivitäten
Ein Stylesheet beschreibt, wie ein Dokument angez...
Verwenden Sie Tomcat, um die gemeinsam genutzte Bibliothek so einzurichten, dass sie dasselbe JAR teilt.
Da immer mehr Projekte bereitgestellt werden, wer...
So lösen Sie das Phantomleseproblem in MySQL
Inhaltsverzeichnis Vorwort 1. Was ist Phantomlese...
Praxis der Vue Global Custom-Anweisung Modal Drag
Inhaltsverzeichnis Hintergrund Umsetzungsideen Er...
Detaillierte Erläuterung der Nginx-Protokollanpassung und Aktivierung des Protokollpuffers
Vorwort Wenn Sie die Quelle der Website-Besuche z...
Verwenden einer Falle zum Durchführen einer Umgebungsbereinigung vor dem ordnungsgemäßen Herunterfahren des Docker-Containers
Wie können wir beim Beenden eines laufenden Conta...
Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet
Amtliche Dokumentation: Daher sollte MySQL wie fo...
Detaillierte Erklärung der Fallstricke bei der Aufzeichnung von lower_case_table_names in MySQL
1 Ursache Nachdem das Projekt die Datenbank migri...
So verwenden Sie display:olck/none zum Erstellen einer Menüleiste
Die Auswirkung der Vervollständigung einer Menüle...
Tutorial-Diagramm zur Installation von mysql8.0.18 unter Linux (Centos7)
1 Holen Sie sich das Installationsressourcenpaket...
MySQL 5.7.10 Installationsdokumentation Tutorial
1. Installieren Sie Abhängigkeitspakete yum -y in...
Implementierung des Attributs „list-style-type“ vor CSS-geordneten oder ungeordneten Listen
Beispiel: <html> <Kopf> <style typ...
Detaillierte Erklärung des Unterschieds und der Verwendung von Anführungszeichen und Backticks in MySQL
Vorwort Also habe ich diesen Blog geschrieben. Di...