1
嘗試使用多個圖片創建一個頁面，當您單擊它們時，它會使用模式進行放大。這段代碼對於1張圖片非常適用，但是隨着我添加了更多，只有第一張。請指教。多個Javascript模塊
// Zoom in Affect
// Get the modal
var modal = document.getElementById('myModal'); \t \t \t \t <!-- ? -->
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg'); \t \t \t \t \t <!-- ? -->
var modalImg = document.getElementById("img"); \t \t \t <!-- ? --> \t \t
var captionText = document.getElementById("caption"); \t \t <!-- ? -->
img.onclick = function(){ \t \t \t \t \t \t \t \t \t <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; \t \t \t \t \t \t \t <!-- ? -->
modalImg.src = this.src; \t \t \t \t \t \t \t \t <!-- ? -->
modalImg.alt = this.alt; \t \t \t \t \t \t \t \t <!-- ? -->
captionText.innerHTML = this.alt; \t \t \t \t \t \t <!-- ? -->
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}#myImg {
\t cursor: pointer;
\t transition: 0.3s;
\t border-top-left-radius: 20px;
\t border-top-right-radius: 20px;
\t border: 3px solid #7DAFE7;
}
#myImg:hover {
\t opacity: 0.7; \t \t \t \t /* How much image changes when moving mouse over it */
\t border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
\t display: none; \t \t \t \t /* ? */ \t /* Hidden by default */
\t position: fixed; \t \t \t /* ? */ \t /* Stay in place */
\t z-index: 1; \t \t \t \t /* ? */ \t /* Sit on top */
\t padding-top: 100px; \t \t /* Pixels the zoomed image is from the top of the screen */ /* Location of the box */
\t left: 0;
\t top: 0;
\t width: 100%; /* Full width */
\t height: 100%; /* Full height */
\t overflow: auto; /* Enable scroll if needed */
\t background-color: rgb(0,0,0); /* ? not sure why there's 2 background-color */ /* Fallback color */
\t background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; \t \t \t \t \t \t /* Width of picture inside modal? */
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
\t position: absolute;
\t top: 15px;
\t right: 35px;
\t color: #f1f1f1;
\t font-size: 40px;
\t font-weight: bold;
\t transition: 0.3s;
\t font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
\t width: 100%;
\t /*background-color: #0200FF;*/
\t padding-left: 5%;
\t padding-right: 5%;
\t padding-top: 5%;
\t position: relative;
}
.imgPicture {
width: 90%;
}<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> \t \t \t <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> \t \t \t \t <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
'id's必須是唯一的 – baao