山水山水,有山有水才是好风光。夜色越来越浓了,村落啦,树林子啦,坑洼啦,沟渠啦,好象一下子全都掉进了神秘的沉寂里。
JS或jQuery实现全屏
JS写法一
.html
<div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div>
.css
/* 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; }
.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; /*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);
myJS.js
$(function () { $("#btn").click(function () { $("#cont").fullScreen(); }) });
以上就是JS实现全屏的四种写法。气愤是拿别人做错的事来惩罚自己。更多关于JS实现全屏的四种写法请关注haodaima.com其它相关文章!