点击全屏按钮将页面全屏显示,同时全屏按钮替换成退出全屏按钮,点击退出全屏让浏览器页面退出全屏显示。
1.HTML:
<img src="./img/全屏.png" alt="" title="全屏" class="screen" /> <img src="./img/退出全屏.png" alt="" title="退出全屏" class="exitscreen" style="display:none" />
2.CSS:
.screen, .exitscreen, .renovate { width: 22px; height: 22px; }
3.JS:
//绑定全屏事件 document.getElementsByClassName('screen')[0].addEventListener('click', fullScreen) //取消全屏事件 document.getElementsByClassName('exitscreen')[0].addEventListener('click', fullExit) //进入全屏 function fullScreen() { document.getElementsByClassName("exitscreen")[0].style.display = "block"; document.getElementsByClassName("screen")[0].style.display = "none"; var element = document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID"); //IE 10及以下ActiveXObject if (window.ActiveXObject) { var WsShell = new ActiveXObject('WScript.Shell') WsShell.SendKeys('{F11}'); } //HTML W3C 提议 else if (element.requestFullScreen) { element.requestFullScreen(); } //IE11 else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } // Webkit (works in Safari5.1 and Chrome 15) else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } // Firefox (works in nightly) else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } } //退出全屏 function fullExit() { document.getElementsByClassName("exitscreen")[0].style.display = "none"; document.getElementsByClassName("screen")[0].style.display = "block"; var element = document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID"); //IE ActiveXObject if (window.ActiveXObject) { var WsShell = new ActiveXObject('WScript.Shell') WsShell.SendKeys('{F11}'); } //HTML5 W3C 提议 else if (element.requestFullScreen) { document.exitFullscreen(); } //IE 11 else if (element.msRequestFullscreen) { document.msExitFullscreen(); } // Webkit (works in Safari5.1 and Chrome 15) else if (element.webkitRequestFullScreen) { document.webkitCancelFullScreen(); } }
4.网页效果
JS全屏