img onclick 放大

要实现图片的点击放大功能，可以使用 JavaScript 和 CSS 来实现。

首先，在 HTML 中给需要放大的图片添加一个 class，例如 `zoomable`，并添加一个 `data-src` 属性，值为原图片的链接。例如：

<img class="zoomable" src="thumbnail.jpg" data-src="fullsize.jpg">

接下来，在 CSS 中定义一个用于显示放大图片的遮罩层和图片容器的样式：

.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

.zoom-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
}

然后，在 JavaScript 中为 `zoomable` 类的图片添加点击事件处理程序。当用户点击图片时，创建一个遮罩层和图片容器，并将原图片的链接赋值给图片容器中的 `src` 属性。最后，显示遮罩层和图片容器。

var zoomable = document.querySelectorAll('.zoomable');
for (var i = 0; i < zoomable.length; i++) {
    zoomable[i].addEventListener('click', function() {
        var overlay = document.createElement('div');
        overlay.className = 'zoom-overlay';

        var container = document.createElement('div');
        container.className = 'zoom-container';

        var image = document.createElement('img');
        image.src = this.dataset.src;

        container.appendChild(image);
        overlay.appendChild(container);
        document.body.appendChild(overlay);

        overlay.style.display = 'block';
    });
}

最后，为遮罩层添加点击事件处理程序，以便用户可以点击遮罩层来关闭放大图片的显示。

document.addEventListener('click', function(e) {
    if (e.target.classList.contains('zoom-overlay')) {
        e.target.parentNode.removeChild(e.target);
    }
});