主要是全屏和退出全屏事件,以及相应的操作(采用window.onresize监测)
$(function(){
//全屏
$("#fullScreen").on("click",function(){
fullScreen();
})
//退出全屏
$("#exitFullScreen").on("click",function(){
exitFullscreen();
})
})
//fullScreen()和exitScreen()有多种实现方式,此处只使用了其中一种
//全屏
function fullScreen() {
var element = document.documentElement;//需要全屏的元素
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//监听window是否全屏,并进行相应的操作,支持esc键退出
window.onresize = function() {
//判断是否是全屏
var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen ||
document.msFullscreenElement || document.fullscreenElement
);//!document.webkitIsFullScreen都为true。因此用!!
if (isFull==false) {
$("#exitFullScreen").css("display","none");
$("#fullScreen").css("display","");
}else{
$("#exitFullScreen").css("display","");
$("#fullScreen").css("display","none");
}
}
补充:
!和!!的区别
! 变量转换成boolean类型判断,null、undefined和空字符串取反都为false,其余都为true。
!! 用来做类型判断
if(a!=null&&typeof(a)!=undefined&&a!=’’){}
等价于if(!!a){}
来自:https://blog.csdn.net/u013240519/article/details/84035505
网友评论