单击放大缩略图

enlarging a thumbnail onClick

本文关键字：略图 放大 单击      更新时间：2024-04-28

我正在尝试制作一种图像库，用户可以在其中查看一系列缩略图，并单击它们以查看全尺寸缩略图。我已经设法做到了这一点，但我做这件事的方式需要大量重复的代码。以下是我为每张图像所做的示例：

脚本

function load1() {
    document.getElementById('wup').src = document.getElementById('wop1').src
            var myElement = document.querySelector("#wup");
            myElement.style.visibility = "visible";
            var myElementB = document.querySelector("button");
            myElementB.style.visibility = "visible";
            var myElementC = document.querySelector("#cover");
            myElementC.style.visibility = "visible";
    }

实际上，每个缩略图（有很多）都有一个在单击时运行的函数。它会在屏幕中央显示一个大图像，图像的来源是单击的缩略图。虽然这种方法确实有效，但它需要大量感觉不必要的重复。

我要查找的内容：

一种简单有效的方法来做同样的事情。

任何帮助都将不胜感激！谢谢

只需为每个元素创建一个函数即可。

function showLargeImage(thumbnail) {
  document.getElementById('wup').src = thumbnail.src
  document.querySelector("#wup").style.visibility = "visible";
  document.querySelector("button").style.visibility = "visible";
  document.querySelector("#cover").style.visibility = "visible";
}

然后，对于每个图像，只需调用函数onclick。

<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>
相关文章：