jQuery 浏览器全屏
这个小编没什么说的，小编就直接上代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 浏览器全屏</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<style type="text/css">
/*全屏按钮css样式*/
.screenBuooton{
width:50px;
height:50px;
background:red;
position:fixed;
top:40px;
right:40px;
}
</style>
<body>
<!--顶部点击全屏-->
<div class="screenBuooton"></div>
</body>
<!--引入外部的jQuery文件-->
<script src="https://misc.360buyimg.com/??jdf/lib/jquery-1.6.4.js,mtd/pc/common/js/o2_ua.js,mtd/pc/base/1.0.0/event.js"></script>
<script type="text/javascript">
//jQuery ES6简写定义
$(()=>{
$(".screenBuooton").click(()=>{
//判断是否全屏
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
if (fullscreenElement == null) {
//调用全屏开始方法
screenBegin();
} else {
//调用全屏结束方法
screenFinish();
}
})
//全屏开启方法
function screenBegin(){
var docE = document.documentElement;
if (docE.requestFullScreen) {
docE.requestFullScreen();
} else if (docE.mozRequestFullScreen) {
docE.mozRequestFullScreen();
} else if (docE.webkitRequestFullScreen) {
docE.webkitRequestFullScreen();
}
}
//全屏结束方法
function screenFinish(){
var docE = document;
if (docE.screenFinish) {
docE.screenFinish();
} else if (docE.mozCancelFullScreen) {
docE.mozCancelFullScreen();
} else if (docE.webkitCancelFullScreen) {
docE.webkitCancelFullScreen();
}
}
</script>
</html>
东泰 
