通过JQ实现前端页面全屏、退出全屏得切换。当在全屏状态下,显示退出全屏菜单,非全屏状态下,显示全屏菜单。
原文链接:https://www.liyinbing.cn/article/det/58
1、html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏——退出全屏</title>
<style>
body {
background-color: black;
}
.fullScreen {
position: absolute;
top: 20px;
right: 30px;
}
.exitFullScreen {
display: none;
position: absolute;
top: 20px;
right: 30px;
}
.main {
color: orangered;
font-size: 60px;
margin: 150px auto;
text-align: center;
}
</style>
</head>
<body>
<button class="fullScreen">全屏</button>
<button class="exitFullScreen">退出全屏</button>
<div class="main">我现在非全屏状态</div>
<script src="./jquery-2.1.1.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
2、JS代码
function handleFullScreen() {
var de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else {
wtx.info("当前浏览器不支持全屏!");
}
}
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.msExitFullscreen) {
de.msExitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitExitFullscreen) {
de.webkitExitFullscreen();
}
}
$(function () {
let body = $("body");
let main = $(".main")
let fullScreenButton = $("button.fullScreen");
let exitFullScreenButton = $("button.exitFullScreen");
body.on("click", "button.fullScreen", function () {
handleFullScreen();
})
body.on("click", "button.exitFullScreen", function () {
exitFullscreen();
})
$(document).on("fullscreenchange", function (event) {
if (document.fullscreenElement || document.webkitFullscreenElement) {
fullScreenButton.css('display', 'none');
exitFullScreenButton.css("display", "inline-block");
main.text("我现在是全屏状态");
} else {
fullScreenButton.css('display', 'inline-block');
exitFullScreenButton.css("display", "none");
main.text("我现在非全屏状态");
}
})
})
3、实现效果
换个行===================================>