您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:05-19来源:作者:点击数:
在这里插入图片描述

如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器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;
}
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门