Preface
The demo contains the encapsulation of the hook function for full-screen events, exit full-screen events, and changes in the screen state
The following is a complete example, just copy it and run it in the whole way (note that jquery is introduced)
Please see the example here☞fullscreen example
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="js/jquery-1.11."></script>
<style>
* {
margin: 0;
padding: 0;
}
/* window full screen style */
html:-moz-full-screen {
background: grey;
}
html:-webkit-full-screen {
background: grey;
}
html:fullscreen {
background: grey;
}
div {
width: 100px;
height: 100px;
background: blue;
}
img {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<button class="win-fullscreen">Full screen window</button>
<button class="div-fullscreen">divfull screen</button>
<button class="img-fullscreen">imgfull screen</button>
<button class="exit-fullscreen">退出full screen</button>
<div class="div">
<img class="img" src="images/">
</div>
</body>
<script>
/* Call example */
// Full screen of the window $('.win-fullscreen').on('click', function() {
requestFullScreen();
});
// div full screen $('.div-fullscreen').on('click', function() {
requestFullScreen($('.div')[0]);
});
// img full screen $('.img-fullscreen').on('click', function() {
requestFullScreen($('.img')[0]);
});
// Exit full screen $('.exit-fullscreen').on('click', function() {
exitFull();
});
// Window status change event fullscreenchange(document, function(isFull) {
(isFull);
});
/* Package */
// The window state changes function fullscreenchange(el, callback) {
("fullscreenchange", function () {
callback && callback();
});
("webkitfullscreenchange", function () {
callback && callback();
});
("mozfullscreenchange", function () {
callback && callback();
});
("msfullscreenchange", function () {
callback && callback();
});
}
// full screen function requestFullScreen(element) {
var requestMethod = || //W3C
|| //Chrome etc. || //FireFox
; //IE11
if (requestMethod) {
(element);
}else if (typeof !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("");
if (wscript !== null) {
("{F11}");
}
}
}
//Exit full screen function exitFull() {
var exitMethod = || //W3C
|| //Chrome etc. || //FireFox
; //IE11
if (exitMethod) {
(document);
}else if (typeof !== "undefined") {//for Internet Explorer
var wscript = new ActiveXObject("");
if (wscript !== null) {
("{F11}");
}
}
}
</script>
</html>
Reference article
Use html5 js to achieve full-screen effect of clicking a button
Native Fullscreen JavaScript API (plus jQuery plugin)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.