如何使用 Javascript 进行图像缩放

Question

I'm working on a web project and needed to make a gallery of images .我正在做一个网络项目，需要制作一个图片库。 And the images need to be Zoomed in when clicked on.单击时需要放大图像。 But with my code only the first image Zooms.但是我的代码只有第一张图像缩放。

How can i make all of them Zoom below is my source Code.我怎样才能让它们全部缩放下面是我的源代码。

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    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)}
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" id="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
 function openModal(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementById('close');

// When the user clicks on <span> (x), close the modal
 function close() { 
    modal.style.display = "none";
}
span.addEventListener("click", close);
img.addEventListener("click", openModal);
</script>

</body>
</html>

Answer 1

An id name must be unique in the entire webpage. id名称在整个网页中必须是唯一的。 Otherwise, selectors will work only on the first one.否则，选择器将只在第一个上工作。

For having selectors work on multiple elements, classes where invented.为了让选择器在多个元素上工作， classes是发明的。 You should change your code to be:您应该将代码更改为：

[...]
<img id="myImg1" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
[...]

The CSS: CSS：

[...]
.myImg {
     border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.myImg:hover {opacity: 0.7;}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
[...]

Notice how I changed the hash ( # ) for a dot ( . ).请注意我如何更改点 ( . ) 的哈希 ( # )。

Hash means select by id, and dot means select by class. Hash 表示按 id 选择，点表示按类选择。 You should follow the same principle for everything.你应该对所有事情都遵循同样的原则。 Id when is going to be unique and class when is multiple. ID when 将是唯一的，而 class when 是多个。

Now we are going to select by class in the JS:现在我们将在 JS 中按类进行选择：

/*[...]*/
// Select all the images by class
var imgs = document.querySelectorAll('.myImg');

// Loop the array and add the logic to each one
imgs.forEach(function(img) {
    img.addEventListener("click", openModal);
});
/*[...]*/

Answer 2

Do not use ID use classes.不要使用 ID 使用类。 For example Use例如使用

.caption

Instead of而不是

#caption

Answer 3

You are using id for dom click.您正在使用id进行 dom 单击。 Id is unique .better use ClassName for selector instead of id .try with querySelectorAll() and forEach() for assign click event all image element Id 是唯一的。最好使用ClassName作为选择器而不是id尝试使用querySelectorAll()和forEach()为所有图像元素分配点击事件

 // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.querySelectorAll('.myImg'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); function openModal() { modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the <span> element that closes the modal var span = document.getElementById('close'); // When the user clicks on <span> (x), close the modal function close() { modal.style.display = "none"; } span.addEventListener("click", close); img.forEach(a=> a.addEventListener("click", openModal));

 #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover { opacity: 0.7; } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; 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) } } .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } @media only screen and (max-width: 700px) { .modal-content { width: 100%; } }

 <img id="myImg" class="myImg"src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> <img id="myImg" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close" id="close">&times;</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div>

Answer 4

Use classes instead id.使用类而不是 id。 Or, also, you can add event by inline.或者，您也可以通过内联添加事件。

 //and your function will looks like: function openModal(element){ modal.style.display = "block"; modalImg.src = element.src; captionText.innerHTML = element.alt; } // and remove img.addEventListener("click", openModal);

 <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="openModal(this)"> <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200" onclick="openModal(this)">

Answer 5

Try this尝试这个

 // Get the Modal and modal-img let modal = document.querySelector("#myModal"); let modalImg = document.querySelector(".modal-img"); // Show Modal function showModal(elem) { modal.classList.remove("hide"); modalImg.setAttribute("src", elem.src); } // Hide Modal function hideModal() { modal.classList.add("hide"); } // Hide Modal when backdrop (black transparent area) is clicked modal.onclick = function (event) { if(event.target === modal) { hideModal(); } }

 * { box-sizing: border-box; font-family: sans-serif; } /* Style Modal Container */ .modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, .6); overflow: auto; } .hide { display: none; } /* Style Modal Content */ .modal-content { width: 75%; height: 75%; -webkit-animation: .4s slide; animation: .4s slide; } /* Adding Animation */ @-webkit-keyframes slide { from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide { from { opacity: 0; -webkit-transform: translateY(-50px); transform: translateY(-50px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } /* Style Modal Header */ .modal-header { display: -webkit-flex; -webkit-align-items: flex-start; -webkit-justify-content: space-between; display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1rem; background-color: white; } /* Style Close Button */ .close { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; background-color: transparent; border: none; float: right; font-size: 1.5rem; font-weight: 700; color: #000; opacity: .5; cursor: pointer; } /* Style Modal Body */ .modal-body { position: relative; -webkit-flex: 1 1 auto; flex: 1 1 auto; } /* Style Modal Image */ .modal-img { width: 100%; height: auto; object-fit: cover; }

 <p>Click the Images below:</p> <!-- Image trigger Modal --> <img onclick="showModal(this)" src="https://parrot-tutorial.com/images/carousel_red3.jpg" style="width: 300px;"> <img onclick="showModal(this)" src="https://parrot-tutorial.com/images/air_ballon.jpg" style="width: 300px;"> <img onclick="showModal(this)" src="https://parrot-tutorial.com/images/nature_autumn.jpg" style="width: 300px;"> <!-- *************** Modal *************** --> <div class="modal hide" id="myModal" tabindex="-1"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" onclick="hideModal()">&times;</button> </div> <!-- Modal Body --> <div class="modal-body"> <img class="modal-img" src="/images/carousel_3.jpg"> </div> </div> </div>

Reference: How To Create Modal Images参考：如何创建模态图像

如何使用 Javascript 进行图像缩放

问题描述

5 个解决方案

解决方案1
2 2017-05-29 11:56:01

解决方案2
0 已采纳 2017-05-29 11:55:58

解决方案3
0 2017-05-29 11:56:42

解决方案4
0 2017-05-29 12:30:10

解决方案5
0 2019-10-29 04:41:38

如何使用 Javascript 进行图像缩放

问题描述

5 个解决方案

解决方案1 2 2017-05-29 11:56:01

解决方案2 0 已采纳 2017-05-29 11:55:58

解决方案3 0 2017-05-29 11:56:42

解决方案4 0 2017-05-29 12:30:10

解决方案5 0 2019-10-29 04:41:38

解决方案1
2 2017-05-29 11:56:01

解决方案2
0 已采纳 2017-05-29 11:55:58

解决方案3
0 2017-05-29 11:56:42

解决方案4
0 2017-05-29 12:30:10

解决方案5
0 2019-10-29 04:41:38