JS实现全屏的四种写法
作者：BaymaxLily
这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS或jQuery实现全屏
JS写法一
.html
<div class="container" <button id="full-screen">全屏</button> <button id="exit-fullscreen">退出</button> </div>
.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;
height: 30px;
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 = document.getElementById("full-screen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
var cancelFullScreen = document.getElementById("exit-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
var fullscreenState = document.getElementById("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 = (document.mozFullScreen)? "" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
}
})();
JS写法二
.html
<div style="margin:0 auto;height:600px;width:700px;"> <button id="btn">全屏</button> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > <h1>全屏展示和退出全屏</h1> </div> </div>
.js
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
/*
注意这里的样式的设置表示全屏显示之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏里把样式还原回去
(见写法三)
*/
elem.style.height = '800px';
elem.style.width = '1000px';
};
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || 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
<div style="margin:0 auto;height:600px;width:700px;"> <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > <button id="btn">全屏</button> <h1>全屏展示和退出全屏</h1> <button id="btnn" >退出</button> </div> </div>
.js
document.getElementById("btn").onclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
/*
注意这里的样式的设置表示全屏显示之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏里把样式还原回去
*/
elem.style.height = '800px';
elem.style.width = '1000px';
};
document.getElementById("btnn").onclick=function () {
exitFullscreen();
};
/*
全屏显示
*/
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
requestMethod.call(element);
};
/*
全屏退出
*/
function exitFullscreen() {
var elem = document;
var elemd = document.getElementById("content");
if (elem.webkitCancelFullScreen) {
elem.webkitCancelFullScreen();
} else if (elem.mozCancelFullScreen) {
elemd.mozCancelFullScreen();
} else if (elem.cancelFullScreen) {
elem.cancelFullScreen();
} else if (elem.exitFullscreen) {
elem.exitFullscreen();
} else {
//浏览器不支持全屏API或已被禁用
};
/*
退出全屏后样式还原
*/
elemd.style.height = '500px';
elemd.style.width = '700px'
}
jQuery写法四
.html
<div id="cont" STYLE="width: 500px;height: 300px;background-color: aliceblue;margin: auto"> <button id="btn">全屏&退出</button> </div>
.css
.full{
position: fixed;
align-content: center;
/*top: 10px;*/
/*left: 10px;*/
/*
原来基础的百分百
*/
width: 100%;
height: 100%;
overflow: auto;
}
fullScreen.js
(function ($) {
// Adding a new test to the jQuery support object
$.support.fullscreen = supportFullScreen();
// Creating the plugin
$.fn.fullScreen = function (props) {
if (!$.support.fullscreen || this.length != 1) {
// The plugin can be called only
// on one element at a time
return this;
}
if (fullScreenStatus()) {
// if we are already in fullscreen, exit
cancelFullScreen();
return this;
}
// You can potentially pas two arguments a color
// for the background and a callback function
var options = $.extend({
'background': '#111',
'callback': function () {}
}, props);
// This temporary div is the element that is
// actually going to be enlarged in full screen
var fs = $('<div>', {
'css': {
'overflow-y': 'auto',
'background': options.background,
'width': '100%',
'height': '100%',
'align': 'center'
}
});
var elem = this;
// You can use the .fullScreen class to
// apply styling to your element
elem.addClass('fullScreen');
// Inserting our element in the temporary
// div, after which we zoom it in fullscreen
fs.insertBefore(elem);
fs.append(elem);
requestFullScreen(fs.get(0));
fs.click(function (e) {
if (e.target == this) {
// If the black bar was clicked
cancelFullScreen();
}
});
elem.cancel = function () {
cancelFullScreen();
return elem;
};
onFullScreenEvent(function (fullScreen) {
if (!fullScreen) {
// We have exited full screen.
// Remove the class and destroy
// the temporary div
elem.removeClass('fullScreen').insertBefore(fs);
fs.remove();
}
// Calling the user supplied callback
options.callback(fullScreen);
});
return elem;
};
// These helper functions available only to our plugin scope.
function supportFullScreen() {
var doc = document.documentElement;
return ('requestFullscreen' in doc) ||
('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
('webkitRequestFullScreen' in doc);
}
function requestFullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}
function fullScreenStatus() {
return document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
}
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
function onFullScreenEvent(callback) {
$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {
// The full screen status is automatically
// passed to our callback as an argument.
callback(fullScreenStatus());
});
}
})(jQuery);
myJS.js
$(function () {
$("#btn").click(function () {
$("#cont").fullScreen();
})
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。