让HTML页面也可以实现全屏效果

来源:互联网 发布:赤月传说2转生数据 编辑:程序博客网 时间:2024/06/05 05:03

当前页面全屏化

本人今天看到一个页面全屏化的功能,觉得很不错,以后可能用到,所以贴出来,让大家使用,转载的别人的代码,不喜勿喷,本人测试,非常好用,谢谢!

首先展示效果:


下面是代码

JavaScript代码:
function toggleFullScreen() {if (!document.fullscreenElement && // alternative standard method!document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methodsif (document.documentElement.requestFullscreen) {document.documentElement.requestFullscreen();} else if (document.documentElement.mozRequestFullScreen) {document.documentElement.mozRequestFullScreen();} else if (document.documentElement.webkitRequestFullscreen) {document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);}} else {if (document.cancelFullScreen) {document.cancelFullScreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}}}

html代码:
<input value="全屏" type='button' onclick='toggleFullScreen();' />

如需上面效果图的合并效果:请点击下面链接:
http://blog.csdn.net/love_xiolan/article/details/52150171

谢谢,喜欢请点赞,不喜勿喷!


2 0