使用JavaScript实现点击显示原图的功能

首先，我们需要准备一些图片资源。假设我们有一张缩略图和一张原图，分别命名为thumbnail.jpg和original.jpg。接下来，我们将在HTML中创建一个图片元素，用于显示缩略图和原图。
HTML代码示例：

<div class="image-container">
<img id="thumbnail" src="thumbnail.jpg" alt="缩略图" />
<div id="original-image" style="display: none;">
<img src="original.jpg" alt="原图" />
</div>
</div>

在这个示例中，我们创建了一个div元素，用于包含缩略图和原图。缩略图使用img元素来显示，原图则包含在一个隐藏的div元素中。
接下来，我们使用CSS来设置图片的样式。我们可以设置缩略图的宽度和高度，以及原图的样式。
CSS代码示例：

.image-container {
width: 500px;
height: 500px;
position: relative;
}
#thumbnail {
width: 100%;
height: auto;
}
#original-image {
position: absolute;
top: 0;
left: 0;
}

在这个示例中，我们设置了图片容器的宽度和高度，并将缩略图的宽度设置为100%，以适应容器的大小。原图的div元素被设置为绝对定位，并位于容器的左上角。
最后，我们使用JavaScript来处理图片的点击事件。当用户点击缩略图时，我们将显示原图，并隐藏缩略图。
JavaScript代码示例：

document.getElementById('thumbnail').addEventListener('click', function() {
document.getElementById('original-image').style.display = 'block';
this.style.display = 'none';
});

在这个示例中，我们使用addEventListener方法来监听缩略图的点击事件。当用户点击缩略图时，我们将原图的div元素的display属性设置为block，以显示原图。同时，我们将缩略图的style.display属性设置为none，以隐藏缩略图。
现在，当用户点击缩略图时，原图将显示出来，而缩略图将被隐藏。用户可以通过再次点击缩略图来切换原图和缩略图的显示状态。