js,jquery点击按钮时显示全屏,F11效果

2019-02-02 17:52 JavaScript 99 梁俊威

今天小编在做一个后台的管理系统模板,奇葩客户希望要一个放大全屏的功能,类似部分浏览器的F11键,废话不多说,上码!

前端代码如下:

<button id="screen">全屏展示</button>

Js代码如下:

// 封装了两个方法
// 打开全屏
function fullScreen(){
    var elem = document.body;  
    if(elem.webkitRequestFullScreen){  
        elem.webkitRequestFullScreen();     
    }else if(elem.mozRequestFullScreen){  
        elem.mozRequestFullScreen();  
    }else if(elem.requestFullScreen){  
        elem.requestFullscreen();  
    }else{  
        // 浏览器不支持全屏API或已被禁用
        console.log("Screen Error: The browser has disabled this feature.");  
    }  
}

// 关闭全屏
function exitFullScreen(){
    var elem = document;  
    if(elem.webkitCancelFullScreen){  
        elem.webkitCancelFullScreen();      
    }else if(elem.mozCancelFullScreen){  
        elem.mozCancelFullScreen();  
    }else if(elem.cancelFullScreen){  
        elem.cancelFullScreen();  
    }else if(elem.exitFullscreen){  
        elem.exitFullscreen();  
    }else{  
        // 浏览器不支持全屏API或已被禁用
        console.log("Screen Error: The browser has disabled this feature."); 
    }  
}

引入jQuery文件,代码如下:

var screen = 1;
// 当然你也可以使用toggle
$("#screen").click(function(){
    if(screen%2==1){
        $(".codelearn-screen a").attr('title', '退出全屏');
        fullScreen();
    }else{
        $(".codelearn-screen a").attr('title', '全屏展示');
        exitFullScreen();
    }
    screen++;
});


若无特殊说明,本站点所有内容均为原创,转载请说明出处!

原文链接:https://www.codelearn.cn/read/105.html 点击复制