每天一个jquery插件-全屏的实现
全屏的实现
今天关键词，水，记一下笔记，关于实现全屏的效果
- 第一个方法就是模仿f11的全屏效果，就是隐去浏览器的诸多控件和样式，只保留页面的内容，这些效果可以用下面的代码实现，我也是从大佬页面里面抄来的，啊哈记笔记记笔记，忘记来源了，大家自己搜搜吧
$("#board").toggleClass("quanping");
var element = document.documentElement; // 返回 html dom 中的root 节点 <html>
if (!$('body').hasClass('full-screen')) {
$('body').addClass('full-screen');
$('#alarm-fullscreen-toggler').addClass('active');
// 判断浏览器设备类型
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
// 兼容火狐
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
// 兼容谷歌
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
// 兼容IE
element.msRequestFullscreen();
}
} else {
// 退出全屏
$('body').removeClass('full-screen');
$('#alarm-fullscreen-toggler').removeClass('active');
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
大意就是body这个dom本身就有这样一个属性是用来控制全屏效果的，不过这里面需要注意的是这个并不能浏览器主动加载，必须是引导用户实际触发才能使用，就比如你是一个定时器到点就自动全屏这个是会被当成垃圾网站的举动直接给禁用这个api的使用，不过你可以引导点击事件之类用户触发的形式来调用这个方法就能正确的使用这个方法了
- 第二个方在页面里面控制某部分全屏，这个就很容易实现了，比如通过给予或者移除一个类来实现空值效果
temp{
position:fixed;
top:0;
left:0;
width:100%;
height:100%；
z-index:999;
}
当然这样给了高度是没办法适应的，比如在给html与body这两个dom→height:100%就行了，html适应的父容器宽度就是浏览器给的视口，body就是适应html的高度
当然，最好的办法就是一边全屏某个dom到页面上，然后再模拟f11把页面直接全屏，这样子就能实现全屏效果啦
洗澡，碎觉