jquery 点击全屏

基础概念

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

类型

全屏功能可以通过多种方式实现，包括：

浏览器内置 API：现代浏览器提供了全屏 API，可以直接调用。
jQuery 插件：有许多 jQuery 插件可以帮助实现全屏功能，如 jquery.fullscreen。

应用场景

全屏功能常用于：

视频播放器：用户可以点击按钮使视频全屏播放。
游戏：全屏模式可以提供更好的游戏体验。
演示文稿：在演示文稿中，全屏模式可以更好地展示内容。

示例代码

以下是一个使用 jQuery 和浏览器内置 API 实现点击全屏的示例：

<!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">全屏显示</button>
    <div id="content" style="width: 300px; height: 200px; border: 1px solid black;">
        这里是内容
    </div>

    <script>
        $(document).ready(function() {
            $('#fullscreen-btn').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>