js 点击实现全屏类似F11效果

方法一
style

<style>
        /* Basic element styles */
        html {
            color: #000;
            background: paleturquoise;
            min-height: 100%;
        }

        /* Structure */
        .container {
            text-align: center;
            width: 500px;
            min-height: 600px;
            background: #fff;
            border: 1px solid #ccc;
            border-top: none;
            margin: 20px auto;
            padding: 20px;
            border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            box-shadow: 1px 1px 10px #000;
            -moz-box-shadow: 1px 1px 10px #000;
            -webkit-box-shadow: 1px 1px 5px #000;
        }

        button {
            margin: 200px auto;
            width: 100px;
            height: 30px;
            background-color: aliceblue;
        }

        /* Fullscreen */
        html:-moz-full-screen {
            background: blue;
        }

        html:-webkit-full-screen {
            background: blue;
        }

        html:-ms-fullscreen {
            background: blue;
            width: 100%;
            /* needed to center contents in IE */
        }

        html:fullscreen {
            background: blue;
        }
    </style>

html

<div class="container" <button id="full-screen">全屏</button>
        <button id="exit-fullscreen">退出</button>
 </div>

(function () {
            var viewFullScreen = document.getElementById("full-screen");
            if (viewFullScreen) {
                viewFullScreen.addEventListener("click", function () {
                    var docElm = document.documentElement;
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen();
                    }
                    else if (docElm.msRequestFullscreen) {
                        docElm.msRequestFullscreen();
                    }
                    else if (docElm.mozRequestFullScreen) {
                        docElm.mozRequestFullScreen();
                    }
                    else if (docElm.webkitRequestFullScreen) {
                        docElm.webkitRequestFullScreen();
                    }
                }, false);
            }

            var cancelFullScreen = document.getElementById("exit-fullscreen");
            if (cancelFullScreen) {
                cancelFullScreen.addEventListener("click", function () {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                    else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    }
                    else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    }
                }, false);
            }


            var fullscreenState = document.getElementById("fullscreen-state");
            if (fullscreenState) {
                document.addEventListener("fullscreenchange", function () {
                    fullscreenState.innerHTML = (document.fullscreenElement) ? "" : "not ";
                }, false);

                document.addEventListener("msfullscreenchange", function () {
                    fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
                }, false);

                document.addEventListener("mozfullscreenchange", function () {
                    fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
                }, false);

                document.addEventListener("webkitfullscreenchange", function () {
                    fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
                }, false);
            }

        })();

方法二

html

<div style="margin:0 auto;height:600px;width:700px;">
        <button id="btn">全屏</button>
        <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;">
            <h1>全屏展示和退出全屏</h1>
        </div>
</div>

document.getElementById("btn").onclick = function () {
            var elem = document.getElementById("content");
            requestFullScreen(elem);
            /*
             注意这里的样式的设置表示全屏显示之后的样式，
             退出全屏后样式还在，
             若要回到原来样式，需在退出全屏里把样式还原回去
             (见写法三)
             */
            elem.style.height = '800px';
            elem.style.width = '1000px';
        };
        function requestFullScreen(element) {
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
            if (requestMethod) {
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") {
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

方法三

html

<div style="margin:0 auto;height:600px;width:700px;">
 <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
  <button id="btn">全屏</button>
  <h1>全屏展示和退出全屏</h1>
  <button id="btnn" >退出</button>
 </div>
</div>

document.getElementById("btn").onclick=function(){
  var elem = document.getElementById("content");
  requestFullScreen(elem);
  /*
   注意这里的样式的设置表示全屏显示之后的样式，
   退出全屏后样式还在，
   若要回到原来样式，需在退出全屏里把样式还原回去
   */
  elem.style.height = '800px';
  elem.style.width = '1000px';
 };
document.getElementById("btnn").onclick=function () {
  exitFullscreen();
 };
 /*
  全屏显示
  */
function requestFullScreen(element) {
 var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
 requestMethod.call(element);
 };
 /*
  全屏退出
  */
function exitFullscreen() {
  var elem = document;
  var elemd = document.getElementById("content");
  if (elem.webkitCancelFullScreen) {
   elem.webkitCancelFullScreen();
  } else if (elem.mozCancelFullScreen) {
   elemd.mozCancelFullScreen();
  } else if (elem.cancelFullScreen) {
   elem.cancelFullScreen();
  } else if (elem.exitFullscreen) {
   elem.exitFullscreen();
  } else {
   //浏览器不支持全屏API或已被禁用
  };
 
  /*
   退出全屏后样式还原
   */
  elemd.style.height = '500px';
  elemd.style.width = '700px'
 
 }

方法四 JQUERY
html

<div id="cont" STYLE="width: 500px;height: 300px;background-color: aliceblue;margin: auto">
 <button id="btn">全屏&退出</button>
</div>

CSS

.full{
  position: fixed;
  align-content: center;
  /*top: 10px;*/
  /*left: 10px;*/
  /*
   原来基础的百分百
  */
  width: 100%;
  height: 100%;
  overflow: auto;
 }

fullScreen.js

(function ($) {
 
 // Adding a new test to the jQuery support object
 $.support.fullscreen = supportFullScreen();
 
 // Creating the plugin
 $.fn.fullScreen = function (props) {
 
  if (!$.support.fullscreen || this.length != 1) {
 
   // The plugin can be called only
   // on one element at a time
 
   return this;
  }
 
  if (fullScreenStatus()) {
   // if we are already in fullscreen, exit
   cancelFullScreen();
   return this;
  }
 
  // You can potentially pas two arguments a color
  // for the background and a callback function
 
  var options = $.extend({
   'background': '#111',
   'callback': function () {}
  }, props);
 
  // This temporary div is the element that is
  // actually going to be enlarged in full screen
 
  var fs = $('<div>', {
   'css': {
    'overflow-y': 'auto',
    'background': options.background,
    'width': '100%',
    'height': '100%',
    'align': 'center'
   }
  });
 
  var elem = this;
 
  // You can use the .fullScreen class to
  // apply styling to your element
  elem.addClass('fullScreen');
 
  // Inserting our element in the temporary
  // div, after which we zoom it in fullscreen
  fs.insertBefore(elem);
  fs.append(elem);
  requestFullScreen(fs.get(0));
 
  fs.click(function (e) {
   if (e.target == this) {
    // If the black bar was clicked
    cancelFullScreen();
   }
  });
 
  elem.cancel = function () {
   cancelFullScreen();
   return elem;
  };
 
  onFullScreenEvent(function (fullScreen) {
 
   if (!fullScreen) {
 
    // We have exited full screen.
    // Remove the class and destroy
    // the temporary div
 
    elem.removeClass('fullScreen').insertBefore(fs);
    fs.remove();
   }
 
   // Calling the user supplied callback
   options.callback(fullScreen);
  });
 
  return elem;
 };
 
 
 // These helper functions available only to our plugin scope.
 
 
 function supportFullScreen() {
  var doc = document.documentElement;
 
  return ('requestFullscreen' in doc) ||
   ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
   ('webkitRequestFullScreen' in doc);
 }
 
 function requestFullScreen(elem) {
  if (elem.requestFullscreen) {
   elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
   elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
   elem.webkitRequestFullScreen();
  }
 }
 
 function fullScreenStatus() {
  return document.fullscreen ||
   document.mozFullScreen ||
   document.webkitIsFullScreen;
 }
 
 function cancelFullScreen() {
  if (document.exitFullscreen) {
   document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
   document.webkitCancelFullScreen();
  }
 }
 
 function onFullScreenEvent(callback) {
  $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {
   // The full screen status is automatically
   // passed to our callback as an argument.
   callback(fullScreenStatus());
  });
 }
 
})(jQuery);

调用

$(function () {
 $("#btn").click(function () {
  $("#cont").fullScreen();
 })
});

js 点击实现全屏 类似F11效果

js 点击实现全屏类似F11效果