Heim > Artikel > Web-Frontend > So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS

So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS

藏色散人Original: 2023-01-28 14:40:042380Durchsuche

Methode zum Realisieren von Click-to-Enlarge-Bildern mit reinem CSS: 1. Erstellen Sie eine HTML-Beispieldatei. 2. Legen Sie „

"; 3. Verwenden Sie die Methode „function showBgImg(e) {...}", um den Effekt eines Klickens zu erzielen auf das Bild, um es zu vergrößern.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5- und CSS3-Version, DELL G3-Computer

Wie verwende ich reines CSS, um auf das Bild zu klicken, um es zu vergrößern?

Klicken Sie, um das Bild des eigentlichen CSS-Trainings zu vergrößern.

I. Dies ist eine sehr häufige Funktion, die auf Websites angezeigt wird. Nachdem Sie auf das Miniaturbild geklickt haben, wird es angezeigt -Up-Box. Wie wird diese Funktion implementiert? Ich habe gerade die Grundlagen von CSS gelernt und kann sie jetzt in die Praxis umsetzen ist ein Popup-Fenster, das ein großes Bild im Popup-Fenster anzeigt. Das Popup-Fenster ist standardmäßig ausgeblendet. Sie können viele Bilder auf der Hauptseite platzieren und Klickereignisse hinzufügen. Nach dem Klicken erscheint das Popup -up-Fenster zeigt das große Bild an

Groß Nachdem Sie auf das Bild unten geklickt haben, schließen Sie das Popup-Fenster

II Implementierung

Gemäß der obigen Beschreibung implementieren wir zunächst eine Basisversion und schreiben zuerst HTML

<body>

<!-- 先来实现弹窗 -->
<div class=&#39;modal&#39; id=&#39;modal&#39;>
    <img  id=&#39;bgImg&#39; / alt="So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS" >
</div>


<!-- 下面则是主页内容，先只给几个图片 -->

<div>
    <img class=&#39;thum-img&#39; 
    src=&#39;http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg&#39; />
</div>

</body>

und dann den entsprechenden Stil hinzufügen, wobei das Modal standardmäßig ausgeblendet sein muss, also wie folgt (um das Popup-Fenster besser zu unterscheiden, werden die Hintergrundfarbe und der Rand hinzugefügt)

<style>
.modal {
    display: none;
    margin: auto;
    width: 80%;
    height: 80%;
    background-color: rgb(0, 0, 0, 0.89);
    z-index: 1;
    border: 1px solid rgb(255,255,255,1);
}

.modal>img {
    display: block;
    margin: auto;
    padding: 10%;
    max-width: 60%;
    max-height: 60%;
}

.thum-img {
    width: 200px;
    height: 200px;
    margin: auto;
    display: block;
    padding: 40px;
}

</style>

Das nächste Der Schritt besteht darin, auf die Logik zum Anzeigen des großen Bildes zu klicken, die mithilfe von js implementiert wird.

<script>
    var modal = document.getElementById(&#39;modal&#39;);
    var bgImg = document.getElementById(&#39;bgImg&#39;);
    var thumImg = document.getElementById(&#39;thumImg&#39;);
    thumImg.onclick = function() {
        modal.style.display = &#39;block&#39;;
        bgImg.src = this.src;
    }

    bgImg.onclick = function() {
        modal.style.display = &#39;none&#39;;
    }
</script>

Fügen Sie die obige Implementierung hinzu, nachdem Sie sie in einen HTML-Code zusammengestellt, direkt getestet und angezeigt haben. Der Demonstrationseffekt ist wie folgt

Obwohl die oben genannten Ergebnisse die erwarteten Ergebnisse erzielten, gibt es einige Punkte, mit denen wir nicht zufrieden sind

Es ist nicht der Popup-Effekt, den wir erwartet hatten, das Originalbild wurde verkleinert

Das wäre so Es wäre besser, wenn im Popup-Fenster ein vergrößerter Animationseffekt angezeigt wird (Sie können einfach die Animation verwenden, die Sie zuvor gelernt haben)

Wie klicke ich zum Vergrößern, wenn das Bild viele Bilder enthält?

III Erstens möchten wir, dass es sich um ein echtes Popup-Fenster handelt, ohne dass dies Auswirkungen auf das vorhandene Layout hat. Dies geschieht beispielsweise durch Festlegen der Position. Beispielsweise können wir eine weitere Ebene außerhalb des Modals hinzufügen, um

<div style=&#39;position:fixed&#39;>
    <div class=&#39;modal&#39; id=&#39;modal&#39;>
        <img  id=&#39;bgImg&#39; / alt="So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS" >
    </div>
</div>

So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS

zu werden. Der Stil des Popup-Fensters ist zu hässlich. Wir können den zuvor erlernten Randschatten verwenden, um einen schönen Popup-Effekt zu erzielen.

Entfernen Sie die Hintergrundfarbe. Fügen Sie Schatten und einen weißen Rand hinzu. Das geänderte CSS sieht wie folgt aus Der nächste Schritt besteht darin, dies in eine universelle Lösung umzuwandeln. Dies ist hauptsächlich eine Modifikation des Bildklickereignisses. Nehmen Sie einfach einige Änderungen an den oben genannten festcodierten Teilen vor Der gesamte Quellcode

.modal {
    display: none;
    margin: auto;
    padding-top: 5%;
    width: 50%;
    height: 80%;
    z-index: 1;
    background-color: white;
}

.modal img {
    display: block;
    padding: 10px;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid white;
}

Empfehlung Studie: „

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was soll ich tun, wenn die CSS3-Rotation unregelmäßig erscheint?Nächster Artikel：Was soll ich tun, wenn die CSS3-Rotation unregelmäßig erscheint?

In Verbindung stehende Artikel

Mehr sehen