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").οnclick=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").οnclick=function(){
var elem = document.getElementById("content");
requestFullScreen(elem);
/*
注意这里的样式的设置表示全屏显示之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏里把样式还原回去
*/
elem.style.height = '800px';
elem.style.width = '1000px';
};
document.getElementById("btnn").οnclick=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 = $('', {
'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();
})
});