实现全屏切换

 

 

{#  添加全屏,退出全屏功能#}

        <li class="layui-nav-item mobile layui-hide-xs"
            id="fullscreen"
        >
            <i class="layui-icon layui-icon-screen-full"></i>
        </li>

 

 

 

     //进入全屏
    function enterfullscreen() {
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
//FireFox
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
//Chrome等
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
//IE11
        else if (elem.msRequestFullscreen) {
            elem.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();
        }
    }

    var count = 0;
    $('#fullscreen').on('click',function () {
        count ++;
        count % 2===1 ? enterfullscreen():exitfullscreen();
    });

 

posted @ 2020-05-09 22:03  AnthonyWang  阅读(308)  评论(0)    收藏  举报