js 模拟f11全屏

Html

Css

html:-moz-full-screen {
	background:red
}
html:-webkit-full-screen {
	background:red
}
html:fullscreen {
	background:red
}

// 全屏
function fullscreen() {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    }
}

// 退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

// 监听是否全屏 
// 监听是否全屏
window.onload = function() {
    var elem = document.getElementById('state');
    document.addEventListener('fullscreenchange',
        function() {

elem.innerText = document.fullscreen ? 'yes' : 'no';
        },
        false);
    document.addEventListener('mozfullscreenchange',
        function() {
            elem.innerText = document.mozFullScreen ? 'yes' : 'no';
        },
        false);
    document.addEventListener('webkitfullscreenchange',
        function() {
            elem.innerText = document.webkitIsFullScreen ? 'yes' : 'no';
        },
        false);
    document.addEventListener('msfullscreenchange',
        function() {
            elem.innerText = document.msFullscreenElement ? 'yes' : 'no';
        },
        false);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js 模拟f11全屏



代码描述：js 模拟f11全屏和退出全屏

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

で离你多远╂

相关代码