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
Detaillierte Erklärung zum Anpassen des Linux-Befehlsverlaufs
Der Befehl „Bash History“ im Linux-System hilft d...
Über das Problem der vertikalen Zentrierung von img und span in div
Wie unten dargestellt: XML/HTML-CodeInhalt in die...
So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme
Inhaltsverzeichnis beschreiben erreichen Die Proj...
Schritte zur Implementierung der Autorisierungsanmeldung für das WeChat-Applet von Uni-App
Inhaltsverzeichnis 1. Anwendung und Konfiguration...
MySQL 5.7.18 Master-Slave-Replikations-Setup (ein Master und ein Slave) Tutorial mit ausführlicher Erklärung
1. Replikationsprinzip Der Masterserver schreibt ...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
Vue implementiert die Drag & Drop-Sortierfunktion der Seiten-Div-Box
vue implementiert die Drag & Drop-Sortierfunk...
Was ist schneller: MySQL-Volltextindex, gemeinsamer Index, Like-Abfrage und JSON-Abfrage?
Inhaltsverzeichnis Abfragehintergrund 1. Like-Abf...
Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)
1. Das Konzept von CSS: (Cascading Style Sheet) V...
Detaillierte Erläuterung der ActiveMQ-Bereitstellungsmethode in der Linux-Umgebung
Dieser Artikel beschreibt die Bereitstellungsmeth...
Das Vue-CLI-Framework implementiert eine Timer-Anwendung
Technischer Hintergrund Diese Anwendung verwendet...
MySQL-Tabellenübergreifende Abfrage und Tabellenübergreifende Aktualisierung
Freunde, die über Grundkenntnisse in SQL verfügen...
Implementierungscode zur Verwendung von CSS-Texthervorhebung zum Hervorheben von Text
1. Einleitung Wenn Sie früher einen bestimmten Te...
Implementieren eines Einkaufswagens mit nativem JavaScript
In diesem Artikel wird der spezifische JavaScript...
vitrualBox+ubuntu16.04 installieren Sie Python3.6, neuestes Tutorial und detaillierte Schritte
Da ich derzeit zum Erlernen von Deep Learning die...