JS设置页面点击全屏显示、退出全屏显示

<div class="">
        <div class="***" id="fullScreen" onclick="handleFullScreen()">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>全屏</span>
        </div>
        <div class="***" id="ExitfullScreen" onclick="exitFullscreen()" style="display: none">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>退出全屏</span>
            </div>
        <div class="***" id="close" onclick="">
            <img src="../../*******" alt="" style="width: 20px;height: 20px;">
            <span>关闭</span>
        </div>
</div>
 /**
     * 设置页面点击全屏、点击退出全屏
     * **/
    //定义一个变量进行判断,默认false 非全屏状态
    var exitFullscreen = false
    // 点击全屏
    function handleFullScreen() {
        var element = document.documentElement;
        if(this.fullscreen) {
            if(document.exitFullscreen) {
                document.exitFullscreen();
            } else if(document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if(document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if(element.requestFullscreen) {
                element.requestFullscreen();
            } else if(element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if(element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
            }
        }
    }
    // 点击退出全屏
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

    //监听window是否全屏,并进行相应的操作,支持esc键退出
    window.onresize = function() {
        //这样写也是对的
        // const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement

        const isFullScreen = document.fullscreenElement
        if (isFullScreen) {
            $("#ExitfullScreen").css("display","flex");
            $("#fullScreen").css("display","none");
            console.log('进入全屏')
        } else {
            $("#ExitfullScreen").css("display","none");
            $("#fullScreen").css("display","flex");
            console.log('退出全屏')
        }

    }


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渡山川挽月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值