HTML入门者技术求助：实现图片点击缩放时如何让脚本识别点击的目标图片

嘿，我来帮你搞定这个图片缩放的小问题！你现在的核心问题是没有把点击的图片元素传递给JavaScript函数，所以函数里的img参数一直是空的，自然没法对目标图片做操作。咱们一步步来改：

第一步：给onclick事件传递当前图片元素 #

在HTML里，把onclick="script()"改成onclick="script(this)"，this在这里就代表你点击的那张<img>元素。记得给所有需要缩放的图片都加上这个onclick属性哦，不然只有第一张能触发。

修改后的HTML片段：

<div class="photo">
  <img onclick="script(this)" src="images/photography/image0.webp">
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3054.JPG"/>
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3094.JPG"/>
</div>
<div class="photo">
  <img onclick="script(this)" src="images/photography/IMG_3069.JPG"/>
</div>

第二步：修正JavaScript里的缩放代码 #

你之前写的img.style.transform = '50px'是错误的，transform的缩放应该用scale()属性，比如scale(1.5)就是放大到1.5倍。另外，用CSS类来管理样式会比直接操作style更清晰，你已经用到了zoomed类，咱们完善一下：

修改后的JavaScript代码：

function script(img) {
  // 切换zoomed类，同时自动控制缩放状态
  if (img.classList.contains('zoomed')) {
    img.style.transform = 'scale(1)';
  } else {
    img.style.transform = 'scale(1.5)';
  }
  img.classList.toggle('zoomed');
}

第三步：用CSS优化缩放体验（可选但推荐） #

在你的style.css里加上这段代码，让缩放有平滑过渡效果，交互体验更好：

.photo img {
  transition: transform 0.3s ease; /* 平滑过渡动画 */
  cursor: zoom-in; /* 鼠标悬停显示放大镜图标 */
  max-width: 100%; /* 防止图片超出容器 */
}

.photo img.zoomed {
  cursor: zoom-out; /* 缩放后切换鼠标图标 */
}

这样改完之后，点击任意图片就能触发缩放效果，再次点击就会恢复原状啦。

内容的提问来源于stack exchange，提问作者Trainhead