jquery 实现全屏

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。全屏功能允许网页内容占据整个屏幕，通常用于视频播放器、游戏或任何需要最大化显示的应用。

类型

浏览器全屏：使用浏览器提供的全屏 API，如 requestFullscreen。
元素全屏：将特定元素（如视频播放器）扩展到全屏。

应用场景

视频播放器：在全屏模式下观看视频。
游戏：提供沉浸式的游戏体验。
演示文稿：在演讲或会议中全屏展示内容。

实现全屏的代码示例

以下是一个使用 jQuery 和原生 JavaScript 实现全屏功能的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Fullscreen Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="fullscreen-btn">Toggle Fullscreen</button>
    <div id="content" style="width: 300px; height: 200px; border: 1px solid black;">
        This is some content.
    </div>

    <script>
        $(document).ready(function() {
            $('#fullscreen-btn').click(function() {
                var elem = document.getElementById('content');
                if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.mozRequestFullScreen) { /* Firefox */
                        elem.mozRequestFullScreen();
                    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                        elem.webkitRequestFullscreen();
                    } else if (elem.msRequestFullscreen) { /* IE/Edge */
                        elem.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) { /* Firefox */
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
                        document.webkitExitFullscreen();
                    } else if (document.msExitFullscreen) { /* IE/Edge */
                        document.msExitFullscreen();
                    }
                }
            });
        });
    </script>
</body>
</html>