如何使用Jquery实现双击进入网页全屏/退出全屏

 我来答
百度网友2a8088a
2018-08-22 · 超过24用户采纳过TA的回答
知道答主
回答量:37
采纳率:81%
帮助的人:20.4万
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<button id="in">双击进入全屏</button>
<button id="out">双击退出全屏</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
 $(function () {
 $("body").on("dblclick", "#in", function () {
 requestFullScreen();
        });
 $("body").on("dblclick", "#out", function () {
 exitFullscreen();
        });
 //进入全屏
 function requestFullScreen() {
 var de = document.documentElement;
 if (de.requestFullscreen) {
 de.requestFullscreen();
            } else if (de.mozRequestFullScreen) {
 de.mozRequestFullScreen();
            } else if (de.webkitRequestFullScreen) {
 de.webkitRequestFullScreen();
            }
        }

 //退出全屏
 function exitFullscreen() {
 var de = document;
 if (de.exitFullscreen) {
 de.exitFullscreen();
            } else if (de.mozCancelFullScreen) {
 de.mozCancelFullScreen();
            } else if (de.webkitCancelFullScreen) {
 de.webkitCancelFullScreen();
            }
        }
    });
</script>
</body>
</html>

效果图

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式