讓HTML頁面也可以實現全屏效果

當前頁面全屏化

本人今天看到一個頁面全屏化的功能,覺得很不錯,以後可能用到,所以貼出來,讓大家使用,轉載的別人的代碼,不喜勿噴,本人測試,非常好用,謝謝!

首先展示效果:


下面是代碼

JavaScript代碼:
function toggleFullScreen() {
	if (!document.fullscreenElement && // alternative standard method
		!document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods
		if (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' οnclick='toggleFullScreen();' />

如需上面效果圖的合併效果:請點擊下面鏈接:
http://blog.csdn.net/love_xiolan/article/details/52150171

謝謝,喜歡請點贊,不喜勿噴!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章