如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11。
这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找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>
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;
}