js 如何做全屏的界面
1、编写HTML页面：主要包括窗口全屏（类似F11的功能），div全屏，让div独块悼对萱占整个电脑屏幕，图片全屏让图片独占整个窗口，退出功能。<!DOCTYPE ht罪焐芡拂ml><html><head> <meta charset="UTF-8"> <title>js全屏测试</title><!--引入jquery需要连网--> <script src="/jquery/jquery-3.3.1.min.js"></script><style> * { margin: 0; padding: 0; } /* 窗口全屏样式 */ html:-moz-full-screen { background: grey; } html:-webkit-full-screen { background: grey; } html:fullscreen { background: grey; } div { width: 100px; height: 100px; background: blue; } img { width: 80px; height: 80px; } </style></head><body> <button>窗口全屏</button> <button>div全屏</button> <button>图片全屏</button> <button>退出全屏</button> <div> <img width="100%" src="./火影.jpg"> </div></body><script> /* 调用示例 */ // 窗口全屏 $('.win-fullscreen').on('click', function() { requestFullScreen(document.documentElement); }); // div全屏 $('.div-fullscreen').on('click', function() { requestFullScreen($('.div')[0]); }); // 图片全屏 $('.img-fullscreen').on('click', function() { requestFullScreen($('.img')[0]); }); // 退出全屏 $('.exit-fullscreen').on('click', function() { exitFull(); }); // 窗口状态改变事件 fullscreenchange(document, function(isFull) { console.log(isFull); }); /* 封装 */ // 窗口状态改变 function fullscreenchange(el, callback) { el.addEventListener("fullscreenchange", function () { callback && callback(document.fullscreen); }); el.addEventListener("webkitfullscreenchange", function () { callback && callback(document.webkitIsFullScreen); }); el.addEventListener("mozfullscreenchange", function () { callback && callback(document.mozFullScreen); }); el.addEventListener("msfullscreenchange", function () { callback && callback(document.msFullscreenElement); }); } // 全屏 function requestFullScreen(element) { var requestMethod = element.requestFullScreen || //W3C element.webkitRequestFullScreen || //Chrome等 element.mozRequestFullScreen || //FireFox element.msRequestFullScreen; //IE11 if (requestMethod) { requestMethod.call(element); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } } //退出全屏 function exitFull() { var exitMethod = document.exitFullscreen || //W3C document.mozCancelFullScreen || //Chrome等 document.webkitExitFullscreen || //FireFox document.webkitExitFullscreen; //IE11 if (exitMethod) { exitMethod.call(document); }else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if (wscript !== null) { wscript.SendKeys("{F11}"); } } }</script></html>
2、本次测试使用谷歌浏览器效果全部实现，第一个测试 ，测试窗口全屏。使用谷歌浏览器打开页面，单击“窗口全屏“进入浏览器窗口全屏界面（与F11功能类似），单击“退出全屏”或ESC键退出。
3、第二个测试：测试div全屏将整个div中的内容铺满整个屏幕，然后按ESC退出。
4、第三个测试：测试图片铺满整个屏幕，然后按ESC退出。
