放大缩略图onClick

我想制作一种图像库，用户可以在其中查看一系列缩略图并点击它们以全尺寸查看它们。我已经成功完成了这项工作，但是我做到这一点的方式需要大量的重复代码。这里是什么，我为每个图像的例子：放大缩略图onClick

脚本

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"; 
    }

差不多发生的事情是每一个缩略图（有相当多）具有被点击时运行这些功能之一。它会在屏幕中心出现一个大图像，并且图像的来源是任何缩略图被点击。虽然这种方法确实有效，但它需要很多感觉像不必要的重复。

我在寻找：

一种简单而有效的方式做同样的事情。

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

来源

2016-04-12 Harry Cosslett

函数接受参数，这意味着它们可以重复使用不同的参数 – adeneo

只需创建一个为每个元素执行此操作的函数。

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)"/>

来源

2016-04-12 03:15:13 hooda

放大缩略图onClick

回答

相关问题