可视化大屏基础篇（1）全屏和退出全屏功能

**前言：**前段时间真正意义上的去接触了一下大屏的页面开发，其中主要考虑的事情包括页面自适应，文字自适应和图片分辨率的问题，今天暂时不说这个，我们先谈一个最简单的全屏化和退出全屏的效果实现。

直接开撸上代码
主要分三步：全屏构造，全屏和退出全屏方法实现（都是利用H5的requestFullscreen、exitFullscreen属性来实现的），执行自定义调用方法。

//  做个全屏的构造函数
    var FullScreen = function (elem) {
        this.elem = document.querySelector(elem);
    }
    FullScreen.prototype.isFull = function () {
        return document.fullscreenElement || document.webkitFullscreenElement 
        || document.mozFullScreenElement || document.msFullscreenElement;
    }
    //  全屏
    FullScreen.prototype.in = function () {
        if (this.elem.requestFullscreen) {
            this.elem.requestFullscreen();
        } else if (this.elem.webkitRequestFullscreen) {
            this.elem.webkitRequestFullscreen();
        } else if (this.elem.mozRequestFullScreen) {
            this.elem.mozRequestFullScreen();
        } else if (this.elem.msRequestFullscreen) {
            this.elem.msRequestFullscreen();
        }
    }
    //  退出全屏
    FullScreen.prototype.out = function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
    /**
     * 执行全屏或退出全屏
     */
    function fullHandler() {
        var full = new FullScreen("#full_screen");
        //  全屏
        if (full.isFull()) {
            full.out();
        } else {
            full.in();
        }
    }

验证环节

有图有真相，谨防各位看官大爷们说我吹牛B

如果发现有一点点帮助，烦请您动个手指关注一哈，将竭诚为您服务