js设置页面全屏

html代码<img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />js代码// 设置全屏$('#alarm-fullscreen-toggler').on('click', function (e) {...

文章共235字 · 阅读需要大约1分钟

一键AI生成摘要，助你高效阅读

问答

下页、再停留

3746人浏览 · 2019-05-21 09:43:00

下页、再停留 · 2019-05-21 09:43:00 发布

html代码

<!-- 全屏按钮 -->
    <img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" />

js代码

    // 设置全屏
$('#alarm-fullscreen-toggler').on('click', function (e) {
    var element = document.documentElement;     // 返回 html dom 中的root 节点 <html>
    
    if(!$('body').hasClass('full-screen')) {
        $('body').addClass('full-screen');
        $('#alarm-fullscreen-toggler').addClass('active');
        // 判断浏览器设备类型
        if(element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen){   // 兼容火狐
            element.mozRequestFullScreen();
        } else if(element.webkitRequestFullscreen) {    // 兼容谷歌
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {   // 兼容IE
            element.msRequestFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/close.png');
    } else {            // 退出全屏
        console.log(document);
        $('body').removeClass('full-screen');
        $('#alarm-fullscreen-toggler').removeClass('active');
        //  退出全屏
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        // 切换全屏按钮
        $('#alarm-fullscreen-toggler').attr('src','/public/index/images/open.png');
    }
});

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/