jquery全屏切换

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。全屏切换是指将网页内容扩展到整个屏幕显示，通常用于视频播放、游戏、演示文稿等场景。

类型

手动全屏：通过 JavaScript 手动控制元素进入全屏模式。
自动全屏：在特定事件触发时（如点击按钮），自动将元素切换到全屏模式。

应用场景

视频播放器：用户可以点击按钮将视频切换到全屏模式，提供更好的观看体验。
游戏：在游戏启动或特定关卡时，自动切换到全屏模式，提升游戏的沉浸感。
演示文稿：在展示幻灯片时，可以切换到全屏模式，使观众更专注于内容。

示例代码

以下是一个使用 jQuery 实现全屏切换的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 全屏切换</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #fullscreen-button {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="content">
        <p>这是一个示例内容。</p>
        <button id="fullscreen-button">全屏切换</button>
    </div>

    <script>
        $(document).ready(function() {
            $('#fullscreen-button').click(function() {
                var elem = document.getElementById('content');
                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();
                }
            });
        });
    </script>
</body>
</html>