前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jq ---- 实现浏览器全屏

jq ---- 实现浏览器全屏

作者头像
小蔚
发布2019-09-11 15:42:31
1.2K0
发布2019-09-11 15:42:31
举报
文章被收录于专栏:小蔚记录小蔚记录
// 点击进入全屏 方法、
var fullscreen=function(){
    elem=document.body;
    if(elem.webkitRequestFullScreen){
        elem.webkitRequestFullScreen();   
    }else if(elem.mozRequestFullScreen){
        elem.mozRequestFullScreen();
    }else if(elem.requestFullScreen){
        elem.requestFullscreen();
    }else{
        //浏览器不支持全屏API或已被禁用
    }
}
// 点击退出全屏 方法
var exitFullscreen=function(){
    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或已被禁用
    }
}

需要注意的是:需要通过 事件触发 当前的函数。

出现的bug:所有的元素会居中,不在html 的左上角。

解决的方法:给html 设置一个相对定位,给body 一个决定定位。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-02-28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档