Welcome to follow each other on Weibo!
weibo.com/leavingseason
Believe in music, believe in Mayday
Home
Web Front-end
JS Tutorial
javascript full screen method to display page elements in full screen_javascript skills
Web Front-end
JS Tutorial
javascript full screen method to display page elements in full screen_javascript skills
javascript full screen method to display page elements in full screen_javascript skills
javascript
screen
One of the simplest ways is to dynamically change the style of the component you want to display in full screen. For example, position becomes absolute, height and width are set to the window size, and the background color is changed to all white (in order to cover it) the rest of the elements on the page). In this way, only the components you want to highlight can be seen on the web page, which is visually equivalent to full screen. At the same time, JavaScript is used to monitor keyboard events. Once the user presses the ESc exit key, it returns to its original state. Part of the code is as follows:
Copy code The code is as follows:
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) { //ESC key
$(' .navbar-inner').fadeIn(100);
var maintable = document.getElementById("holder");
maintable.style.position = "relative";
maintable.style.height = " 100%";
maintable.style.width = "100%";
maintable = document.getElementById("main"); maintable.style.height = "100%";
maintable .style.width = "100%";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
resizePlots();
}
};
fullScreenClick: function () {
var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style .zIndex = 5;
maintable.style.height = $(window).height() "px";
maintable.style.width = $(window).width() "px";
maintable.style.left = 0 "px";
maintable.style.top = 0 "px";
maintable = document.getElementById("main");
maintable.style.height = "90 %";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 "px";
maintable.style.top = $ (window).height() * 0.02 "px";
resizePlots();
},
Here is a way to avoid pressing F11 yourself:
Copy code The code is as follows: