主要是全屏和退出全屏事件，以及相應(yīng)的操作（采用window.onresize監(jiān)測(cè)）

$(function(){
    //全屏
    $("#fullScreen").on("click",function(){
        fullScreen();
    })
    //退出全屏
    $("#exitFullScreen").on("click",function(){
        exitFullscreen();
    })
})

//fullScreen()和exitScreen()有多種實(shí)現(xiàn)方式，此處只使用了其中一種
//全屏
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();
    }
}

//監(jiān)聽(tīng)window是否全屏，并進(jìn)行相應(yīng)的操作,支持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");
    }
}

補(bǔ)充：
!和!!的區(qū)別
! 變量轉(zhuǎn)換成boolean類型判斷，null、undefined和空字符串取反都為false，其余都為true。
!! 用來(lái)做類型判斷
if(a!=null&&typeof(a)!=undefined&&a!=’’){}
等價(jià)于if(!!a){}
來(lái)自：https://blog.csdn.net/u013240519/article/details/84035505