JS或jQuery实现全屏

JS写法一

.html

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

.css

html { color: #000; background: paleturquoise; min-height: 100%; } .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; } html:-moz-full-screen { background: blue; } html:-webkit-full-screen { background: blue; } html:-ms-fullscreen { background: blue; width: 100%; } html:fullscreen { background: blue; }

.js

(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); } })();

JS写法二

.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>

.js

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}"); } } }

JS写法三

.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>

.js

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; 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);

myJS.js

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。