"; 3. Verwenden Sie die Methode "function showBgImg(e) {...}", um den Effekt zu erzielen, als würden Sie auf das Bild klicken, um es zu vergrößern."/> "; 3. Verwenden Sie die Methode "function showBgImg(e) {...}", um den Effekt zu erzielen, als würden Sie auf das Bild klicken, um es zu vergrößern.">
Heim > Artikel > Web-Frontend > So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS
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.
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='modal' id='modal'> <img id='bgImg' / alt="So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS" > </div> <!-- 下面则是主页内容,先只给几个图片 --> <div> <img class='thum-img' src='http://f.hiphotos.baidu.com/image/pic/item/80cb39dbb6fd5266cdb2ba16a718972bd4073612.jpg' /> </div> </body>
<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>
<script> var modal = document.getElementById('modal'); var bgImg = document.getElementById('bgImg'); var thumImg = document.getElementById('thumImg'); thumImg.onclick = function() { modal.style.display = 'block'; bgImg.src = this.src; } bgImg.onclick = function() { modal.style.display = 'none'; } </script>
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='position:fixed'> <div class='modal' id='modal'> <img id='bgImg' / alt="So erreichen Sie ein Bild zum Vergrößern per Mausklick mit reinem CSS" > </div> </div>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.
.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: „
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!