浏览器全屏功能 icon图标设置

最新推荐文章于 2024-04-29 03:09:12 发布

crazy_wsp

最新推荐文章于 2024-04-29 03:09:12 发布

阅读量2.5k

点赞数

分类专栏：浏览器文章标签：全屏 icon

本文链接：https://blog.csdn.net/qq_14994863/article/details/90677193

版权

浏览器专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述

如图，通过点击全屏图标实现页面全屏/取消全屏功能，类似浏览器f11。

一、icon图标选择：

这里偷懒使用的阿里巴巴矢量图标库，当然也可以自己找ui设计一个，地址：icon图标库，icon相关代码如下：

### css代码：

.nav .nav-icon {
    position: relative;
    min-width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-position: center center;
}

.nav .nav-text {
    position: relative;
    text-align: center;
    color: white;
}

#userinfo .nav-icon {
    background-image: url(images/wbs-tool-userinfo.png);
}

#full_screen .nav-icon {
    background-image: url(images/wbs-tool-full.png);
}

### div代码：

<div id="user-panel" class="ui-helper-clearfix">
	<a id="full_screen" class="nav" onclick="fullClick()">
		<div class="nav-icon" style="margin-top: 6%; margin-bottom: -6%;"></div>
		<div class="nav-text">全屏</div>					
	</a>
</div>

icon可以根据需要的分辨率及颜色下载时进行调整：

在这里插入图片描述

二、全屏功能实现：

function fullClick(){
   	//全屏
	var el = window.parent.document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    };
    
    //退出全屏
    var el2 = window.parent.document;
    if (el2.exitFullscreen) {  
        el2.exitFullscreen();  
    }  
    else if (el2.mozCancelFullScreen) {  
        el2.mozCancelFullScreen();  
    }  
    else if (el2.webkitCancelFullScreen) {  
        el2.webkitCancelFullScreen();  
    }  
    else if (el2.msExitFullscreen) {  
        el2.msExitFullscreen();  
    } 
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    }
    return false;
}