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
ReactJs-Grundlagen-Tutorial - Essential Edition
Inhaltsverzeichnis 1. Einführung in ReactJS 2. Ve...
Beispiele für die Verwendung des ES6-Spread-Operators
Inhaltsverzeichnis Was sind Spread- und Rest-Oper...
Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver
Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...
Vue.js verarbeitet Icon-Symbole über Komponenten
Icon-Icon-Verarbeitungslösung Das Ziel dieses Dat...
Detaillierte Erklärung der Nodejs-Array-Warteschlange und der forEach-Anwendung
In diesem Artikel werden hauptsächlich die Proble...
Tutorial-Diagramm zur Installation von TomCat unter Windows 10
Installieren Sie TomCat unter Windows Dieser Arti...
Detaillierte Erklärung zur Verwendung der Linux-lseek-Funktion
Hinweis: Wenn der Artikel Fehler enthält, hinterl...
Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx
Die default_server-Direktive von nginx kann einen...
Verwendung des Linux-Befehls gzip
1. Befehlseinführung Der Befehl gzip (GNU zip) wi...
XHTML-Tutorial für die ersten Schritte: XHTML-Webseiten-Bildanwendung
<br />Das sinnvolle Hinzufügen von Bildern k...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...
Detaillierte Erläuterung des Nest.js-Hashing- und Verschlüsselungsbeispiels
0x0 Einführung Zunächst einmal: Was ist ein Hash-...
Detaillierter Prozess zur Konfiguration von NIS in Centos7
Inhaltsverzeichnis Prinzip Vorbereitung der Netzw...
So verwenden Sie Homebrew unter Linux richtig
Viele Leute verwenden Linux Homebrew. Hier sind d...
Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen
Wenn wir eine Hintergrundfarbe mit Farbverlauf er...