html全屏代码怎么写,JS实现全屏的四种写法JS或jQuery实现全屏
JS写法⼀
.html
全屏
退出
.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;
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 = ElementById("full-screen"); if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (questFullscreen) {
js arguments}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (RequestFullScreen) {
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}, false);
}
var cancelFullScreen = ElementById("exit-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (itFullscreen) {
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (CancelFullScreen) {
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
var fullscreenState = ElementById("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 = (FullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () { fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not "; }, false);
JS写法⼆
.html
全屏
全屏展⽰和退出全屏
.js
var elem = ElementById("content");
requestFullScreen(elem);
/*
注意这⾥的样式的设置表⽰全屏显⽰之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏⾥把样式还原回去
(见写法三)
*/
elem.style.height = '800px';
elem.style.width = '1000px';
};
function requestFullScreen(element) {
var requestMethod = questFullScreen || element.webkitRequestFullScreen || RequestFullScreen || 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
全屏
.js
var elem = ElementById("content");
requestFullScreen(elem);
/*
注意这⾥的样式的设置表⽰全屏显⽰之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏⾥把样式还原回去
*/
elem.style.height = '800px';
elem.style.width = '1000px';
};
exitFullscreen();
};
/*
全屏显⽰
*/
function requestFullScreen(element) {
var requestMethod = questFullScreen || element.webkitRequestFullScreen || RequestFullScreen || element.msRequestFullScreen;
requestMethod.call(element);
};
/*
全屏退出
*/
function exitFullscreen() {
var elem = document;
var elemd = ElementById("content");
if (elem.webkitCancelFullScreen) {
elem.webkitCancelFullScreen();
} else if (CancelFullScreen) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。