浏览器全屏效果
直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器全屏设置</title>
</head>
<body>
<button onclick="fullScreen(document.documentElement);">启动全屏</button>
<button onclick="exitFullscreen();">退出全屏</button>
<script>
// 全屏方法
function fullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>
</body>
</html>说明：
全屏：fullScreen(element)
其中，全屏方法是一个传参方法，因为它既可以是针对整个网页设置，也可以是针对网页中的某个元素。
就我上面写的代码而言，针对整个网页：
fullScreen(document.documentElement);
针对某个元素：
fullScreen(document.getElementById("img01"));
退出全屏：exitFullscreen()
可以看到，这是一个无参函数，因为exitFullscreen只能由document对象调用，而不是启动全屏时传入的对象。
