首先是按钮样式采用的是bootstrap样式

<!--全屏-->
                            <a id="js_full_screen">
                                <i id="glyphicon" class="glyphicon glyphicon-fullscreen"></i>
                                <span class="iconfont-full-screen"></span>
                            </a>

下面是js代码

// 全屏
        var $fullScreenEle = $('#js_full_screen'),
            $fsChildEle = $fullScreenEle.children(),
            $navbarEle = $('.zh-navbar'),
            $headerEle = $('.zh-header'),
            $glyphicon = $("#glyphicon");
        $fullScreenEle.click(function() {
            if($fsChildEle.hasClass('iconfont-full-screen')) { // 全屏
                var docEle = document.documentElement;
                var rfs = docEle.requestFullScreen || docEle.webkitRequestFullScreen || docEle.mozRequestFullScreen || docEle.msRequestFullScreen;
                if (rfs) {
                    rfs.call(docEle);
                } else if (typeof window.ActiveXObject !== "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
                $fsChildEle.removeClass('iconfont-full-screen').addClass('iconfont-exit-screen');
                $glyphicon.removeClass('glyphicon glyphicon-fullscreen').addClass('glyphicon glyphicon-move');
                $navbarEle.hide();
                $headerEle.css('top', 10);
            } else { // 退出全屏
                var cfs = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || document.exitFullScreen;
                if (cfs) {
                    cfs.call(document);
                } else if (typeof window.ActiveXObject !== "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            }
        });

        // 通过resize事件监听退出全屏
        $(window).resize(function() {
            var prevWinHgt = window.sessionStorage.getItem('winHgt');
            if(prevWinHgt) {
                if(window.innerHeight<prevWinHgt && $fsChildEle.hasClass('iconfont-exit-screen')) {
                    $fsChildEle.removeClass('iconfont-exit-screen').addClass('iconfont-full-screen');
                    $glyphicon.removeClass('glyphicon glyphicon-move').addClass('glyphicon glyphicon-fullscreen');
                    $navbarEle.show();
                    $headerEle.css('top', 60);
                }
            }
            window.sessionStorage.setItem('winHgt', window.innerHeight);
        });