1、要对某个元素使用全屏特效，标准的流程是：
①调用这个元素对象的 requestFullscreen()方法；
②浏览器将元素全屏显示，改变相关的属性值，然后触发 document 的 fullscreenchange事件；
③退出全屏时有两种方式，一种是默认的按 ESC键退出，一种是调用 document的 exitFullscreen() 方法；
④浏览器将元素退出全屏显示，改变相关属性值，再次触发 fullscreenchange
方法。
举例说明 全屏显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
// requestFullscreen() 全屏显示
// try {
// console.log(x);
// }catch (e){
// throw new Error("您输出的变量没有进行定义");
// }
//requestFullScreen 全屏显示
var box = document.querySelector("#box");
// 做一下浏览器适配
box.requestFullScreen = box.requestFullScreen || box.mozRequestFullScreen || box.webkitRequestFullScreen;
document.exitFullScreen = document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen;
box.onclick = function (e) {
// 判断当前是否是全屏状态 webkit 下 要加 Is
if (document.webkitIsFullScreen || document.mozFullScreen || document.fullScreen){
//异常处理
//如果try 里面的代码报错 则执行 catch 的代码
try {
document.exitFullScreen();
}catch (e){
alert("您的浏览器不支持全屏!");
}
}else {
try {
box.requestFullScreen();
}catch (e){
alert("您的浏览器不支持全屏!");
}
}
}
</script>
</html>
网友评论