如何仅使用 javascript 使图像在点击时放大？

Question

我正在学习一门课程，该课程要求该单元的所有工作仅使用 Javascript 完成。 我的目标是使我网站照片库中的图像在单击时放大。 问题是，onload 事件似乎无法将事件侦听器添加到图像中。 您可能会发现其他错误，但我想不出任何其他可能阻止代码运行的问题。 这是我所拥有的：

var imgList = document.getElementsByTagName("IMG");

var btn = document.getElementByClassName("reset-btn");

function enlargeImg(img) {
  img.style.transform = "scale(1.5)";
  img.style.transition = "transform 0.25s ease";
  btn.style.visibility = "visible";
  btn.addEventListener("click", resetImg);
}

function resetImg(img) {
  img.style.transform = "scale(1)";
  img.style.transition = "transform 0.25s ease";
}

function init() {
  for (var i = 0; i < imgList.length; i++) {
    var img = imgList[i];
    img.addEventListener("click", enlargeImg);
  }
  
} 

body.addEventListener("load", init);

Answer 1

我对其进行了一些重构。 我使用事件委托将点击事件添加到整个主体，然后使用目标属性。

 var imgList = document.querySelectorAll('img'); var btn = document.querySelector('.reset-btn'); var body = document.querySelector('body'); body.addEventListener("click", function(e){ enlargeImg(e); }); btn.addEventListener('click', resetImg); function enlargeImg(e) { let target = e.target; if(target.className === 'img'){ target.style.transform = "scale(1.5)"; target.style.transition = "transform 0.25s ease"; } } function resetImg() { for (let i of imgList){ i.style.transform = "scale(1)"; i.style.transition = "transform 0.25s ease"; } }

 .reset-btn { margin-top: 200px; }

 <body> <img class="img" src="https://images.unsplash.com/photo-1570824104453-508955ab713e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=613&q=80"> <img class="img" src="https://images.unsplash.com/photo-1557246565-8a3d3ab5d7f6?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"> <div> <button class="reset-btn">Reset</button> </div> <script type="text/javascript" src="Answer boiler.js"></script> <,-- Optional JavaScript --> <.-- jQuery first, then Popper:js. then Bootstrap JS --> <.-- <script src="https.//code.jquery.com/jquery-3.5.1:slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16:1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> --> </body>

如何仅使用 javascript 使图像在点击时放大？

问题描述

1 个解决方案

解决方案1
0 2021-03-08 00:54:25

如何仅使用 javascript 使图像在点击时放大？

问题描述

1 个解决方案

解决方案1 0 2021-03-08 00:54:25

解决方案1
0 2021-03-08 00:54:25