js怎么实现点击图片全屏看图

要实现点击图片全屏看图，可以使用JavaScript结合HTML5的全屏API。、通过监听图片的点击事件，使用全屏API将图片元素全屏显示。

详细描述：首先，你需要准备HTML页面并插入图片元素。然后，通过JavaScript监听图片的点击事件。当图片被点击时，使用HTML5的全屏API将图片元素全屏显示。你还需要处理退出全屏的事件，以确保用户可以方便地返回正常视图。

以下是具体的实现步骤：

一、准备HTML页面

首先，准备一个简单的HTML页面，包含一张图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Fullscreen Example</title>
    <style>
        img {
            max-width: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img id="myImage" src="your-image-source.jpg" alt="Sample Image">
    <script src="fullscreen.js"></script>
</body>
</html>

二、编写JavaScript代码

接下来，编写JavaScript代码来实现点击图片全屏显示的功能。

document.addEventListener("DOMContentLoaded", function() {
    const img = document.getElementById("myImage");
    img.addEventListener("click", function() {
        if (img.requestFullscreen) {
            img.requestFullscreen();
        } else if (img.mozRequestFullScreen) { // Firefox
            img.mozRequestFullScreen();
        } else if (img.webkitRequestFullscreen) { // Chrome, Safari, Opera
            img.webkitRequestFullscreen();
        } else if (img.msRequestFullscreen) { // IE/Edge
            img.msRequestFullscreen();
        }
    });
    document.addEventListener("fullscreenchange", exitHandler);
    document.addEventListener("webkitfullscreenchange", exitHandler);
    document.addEventListener("mozfullscreenchange", exitHandler);
    document.addEventListener("MSFullscreenChange", exitHandler);
    function exitHandler() {
        if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
            console.log("Exited fullscreen mode");
        }
    }
});

三、处理退出全屏

当用户点击图片进入全屏模式后，你还需要处理退出全屏的事件，以确保用户可以方便地返回正常视图。

function exitHandler() {
    if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
        console.log("Exited fullscreen mode");
    }
}

四、跨浏览器兼容性

为了确保代码在各种浏览器中都能正常运行，你需要处理不同浏览器的全屏API。现代浏览器已经逐渐统一了这些API，但为了兼容旧版浏览器，依然需要做一些处理。

五、添加样式

为了提升用户体验，你可以添加一些CSS样式来优化图片的展示效果。

img {
    max-width: 100%;
    cursor: pointer;
}
img:-webkit-full-screen {
    width: 100%;
    height: 100%;
}
img:-moz-full-screen {
    width: 100%;
    height: 100%;
}
img:-ms-fullscreen {
    width: 100%;
    height: 100%;
}
img:fullscreen {
    width: 100%;
    height: 100%;
}

六、实现退出全屏功能

用户可以通过按下ESC键退出全屏模式，但你也可以提供一个按钮来退出全屏。以下是实现退出全屏的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Fullscreen Example</title>
    <style>
        img {
            max-width: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <img id="myImage" src="your-image-source.jpg" alt="Sample Image">
    <button id="exitFullscreen" style="display: none;">Exit Fullscreen</button>
    <script src="fullscreen.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function() {
    const img = document.getElementById("myImage");
    const exitButton = document.getElementById("exitFullscreen");
    img.addEventListener("click", function() {
        if (img.requestFullscreen) {
            img.requestFullscreen();
        } else if (img.mozRequestFullScreen) { // Firefox
            img.mozRequestFullScreen();
        } else if (img.webkitRequestFullscreen) { // Chrome, Safari, Opera
            img.webkitRequestFullscreen();
        } else if (img.msRequestFullscreen) { // IE/Edge
            img.msRequestFullscreen();
        }
    });
    exitButton.addEventListener("click", function() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
        }
    });
    document.addEventListener("fullscreenchange", exitHandler);
    document.addEventListener("webkitfullscreenchange", exitHandler);
    document.addEventListener("mozfullscreenchange", exitHandler);
    document.addEventListener("MSFullscreenChange", exitHandler);
    function exitHandler() {
        if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
            exitButton.style.display = "none";
        } else {
            exitButton.style.display = "block";
        }
    }
});

通过上述步骤，您可以实现点击图片全屏查看的功能，并且提供退出全屏的按钮，增强用户体验。