js实现点击预览放大图片

在 JavaScript 中，要实现点击预览放大图片的效果，首先需要确保你的 HTML 中已经包含了图片元素，并且为其添加了唯一的ID。以下是一个代码示例：

<img id="previewImage" src="image-url" />

在 JavaScript 中，可以通过以下代码来实现该效果：

document.getElementById("previewImage").addEventListener("click", function() {
    // 创建一个 <img> 元素来显示放大的图片
    var largeImage = document.createElement("img");
    largeImage.src = this.src;
    largeImage.style.maxWidth = "100%";

    // 将放大的图片添加到文档中
    document.body.appendChild(largeImage);

    // 监听窗口的 resize 事件，以在窗口大小改变时调整图片的大小
    window.addEventListener("resize", function() {
        largeImage.style.maxWidth = "100%";
    });
});
// 鹏仔前端 pjxi.com   sharedbk.com

上述代码中，当点击图片时，会创建一个新的<img>元素，并将其src 属性设置为被点击图片的src属性的值。然后，将该元素添加到文档中，并设置其最大宽度为 100%，以实现图片的放大效果。同时，还添加了一个窗口的resize事件监听器，以便在窗口大小改变时自动调整放大图片的大小。

请注意，上述示例中的"image-url"应替换为实际的图片路径。另外，这只是一个简单的示例，具体实现可能需要根据你的项目需求进行调整。

鹏仔前端 https://www.pjxi.com/