JS實(shí)現(xiàn)全屏的四種寫法
JS或jQuery實(shí)現(xiàn)全屏
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); /* 注意這里的樣式的設(shè)置表示全屏顯示之后的樣式, 退出全屏后樣式還在, 若要回到原來樣式,需在退出全屏里把樣式還原回去 (見寫法三) */ 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); /* 注意這里的樣式的設(shè)置表示全屏顯示之后的樣式, 退出全屏后樣式還在, 若要回到原來樣式,需在退出全屏里把樣式還原回去 */ 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;*/ /* 原來基礎(chǔ)的百分百 */ 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(); }) });
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element?ui?-?el-button?重新渲染后disabled屬性失效問題解決
這篇文章主要介紹了elementui el-button重新渲染后disabled屬性失效問題解決,解決方法也很簡單,給el-button元素添加key值就可以了,需要的朋友可以參考下2023-07-07純js實(shí)現(xiàn)頁面返回頂部的動(dòng)畫(超簡單)
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)頁面返回頂部的動(dòng)畫(超簡單)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08元素未顯示設(shè)置width/height時(shí)IE中使用currentStyle獲取為auto
元素未顯示設(shè)置width/height時(shí)IE中無法使用currentStyle獲取,默認(rèn)獲取值為auto,需要的朋友可以參考下2014-05-05Bootstrap Tooltip顯示換行和左對(duì)齊的解決方案
小編在使用Bootstrap的Tooltip功能時(shí)遇到一些小問題,換行丟失,文字不是左對(duì)齊。下面小編給大家介紹下Bootstrap Tooltip顯示換行和左對(duì)齊的解決方案,感興趣的朋友一起看看吧2017-10-10Javascript類定義語法,私有成員、受保護(hù)成員、靜態(tài)成員等介紹
JS只是一門支持面向?qū)ο缶幊痰恼Z言,通過OO可以讓我們的代碼組織更加人性化??墒桥c傳統(tǒng)基與類的面向?qū)幊陶Z言不同它沒有類概念并且沒成員訪問修飾符。這多少會(huì)給我們編程工作會(huì)帶來一些束縛2011-12-12javascript系統(tǒng)時(shí)間設(shè)置操作示例
這篇文章主要介紹了javascript系統(tǒng)時(shí)間設(shè)置操作,涉及javascript時(shí)間運(yùn)算與判斷相關(guān)操作技巧,需要的朋友可以參考下2019-06-06js學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)總結(jié)_輪播圖之漸隱漸現(xiàn)版(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07