js点击图片显示原图

在JavaScript中，点击图片显示原图的功能通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Zoom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="image-container">
        <img src="thumbnail.jpg" alt="Thumbnail" id="thumbnail">
        <div class="overlay" id="overlay"></div>
        <img src="fullsize.jpg" alt="Full Size" class="fullsize-image" id="fullsize-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.image-container {
    position: relative;
    display: inline-block;
}

.fullsize-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    visibility: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    visibility: hidden;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const thumbnail = document.getElementById('thumbnail');
    const overlay = document.getElementById('overlay');
    const fullsizeImage = document.getElementById('fullsize-image');

    thumbnail.addEventListener('click', function() {
        overlay.style.visibility = 'visible';
        fullsizeImage.style.visibility = 'visible';
    });

    overlay.addEventListener('click', function() {
        overlay.style.visibility = 'hidden';
        fullsizeImage.style.visibility = 'hidden';
    });
});

解释

HTML部分:
- 创建一个包含缩略图和全尺寸图片的结构。全尺寸图片初始时是隐藏的。
- 添加一个覆盖层（overlay），用于在全尺寸图片显示时覆盖在缩略图上。

CSS部分:
- 设置.image-container为相对定位，以便其子元素可以绝对定位。
- .fullsize-image初始时设置为不可见（visibility: hidden），并且绝对定位以覆盖在缩略图上。
- .overlay也是一个绝对定位的元素，用于在全尺寸图片显示时提供视觉反馈。
JavaScript部分:
- 监听缩略图的点击事件，当点击缩略图时，显示覆盖层和全尺寸图片。
- 监听覆盖层的点击事件，当点击覆盖层时，隐藏覆盖层和全尺寸图片。