全屏

旧城等待， 2022-05-31 12:05 240阅读 0赞

## JavaScript控制浏览器全屏 ##

css代码

<style> html,body { padding: 0; margin: 0; height: 100%; } body { background: url("2.jpg"); background-size: cover; } #full_screen { position: absolute; left: 50%; top:50%; width: 50px; height: 50px; border: 2px solid #0f0; transform: translate(-50%,-50%); background: url("icon.png") center no-repeat; background-size: 100%; cursor: pointer; } </style>

html 代码

<div id="full_screen" title="全屏"></div>

javascript 代码

document.getElementById("full_screen").onclick = function () {
                if(isFullScreen()){
                    exitFullscreen();
                }else {
                    launchFullscreen(document.documentElement)
                }
            };
            //判断各种浏览器，找到正确的方法
            function launchFullscreen(element) {
                if(element.requestFullscreen) {
                    element.requestFullscreen();
                } else if(element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if(element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if(element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
            // 判断浏览器种类
            function exitFullscreen() {
                if(document.exitFullscreen) {
                    document.exitFullscreen();
                } else if(document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if(document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
    
            //判断当前状态是否为全屏
            var isFullScreen = function(){
                if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement)
                    return true;
                else
                    return false;
            };

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 263 阅读

相关 api窗口全屏_使用全屏API

api窗口全屏 In this article, we’ll cover the [Fullscreen API][] with ample amounts of code

缺乏、安全感/ 2022年11月27日 04:27/ 0 赞/ 190 阅读

相关 js - 全屏/取消全屏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

深碍√TFBOYSˉ_/ 2022年11月25日 05:23/ 0 赞/ 242 阅读

相关 WPF全屏

全屏代码： ![复制代码][copycode.gif] 　　　　　　region 设置全屏 this.WindowState =

拼搏现实的明天。/ 2022年08月06日 02:23/ 0 赞/ 158 阅读

相关 Android 切换全屏,取消全屏

切换全屏,取消全屏 / 切换全屏,取消全屏 @param isChecked / private void

你的名字/ 2022年06月13日 04:12/ 0 赞/ 282 阅读

相关全屏

JavaScript控制浏览器全屏 css代码 <style> html,body { padding: 0; margin: 0; height: 100%;

旧城等待，/ 2022年05月31日 12:05/ 0 赞/ 241 阅读

相关 JavaScript控制全屏，监听退出全屏事件

> 本文转自：[https://www.cnblogs.com/yiven/p/7885528.html][https_www.cnblogs.com_yiven_p_7885

雨点打透心脏的1/2处/ 2022年05月19日 13:38/ 0 赞/ 1306 阅读

相关 div的全屏与退出全屏

html按钮： <button onclick="showFull();">全屏</button> <button onclick="delFull();

淡淡的烟草味﹌/ 2022年03月28日 12:48/ 0 赞/ 359 阅读

相关 HTML5--浏览器全屏操作、退出全屏、是否全屏

[HTML5--浏览器全屏操作、退出全屏、是否全屏][HTML5--] <!DOCTYPE html> <html lang="en"> <he

爱被打了一巴掌/ 2021年10月23日 14:12/ 0 赞/ 741 阅读

相关 JavaScript实现全屏与退出全屏功能

js全屏与退出全屏 //全屏显式 function showFull() { var full = docu

待我称王封你为后i/ 2021年08月28日 20:10/ 0 赞/ 549 阅读