我爱模板网在做项目的时候,遇到一个问题,就是点击下面的按钮,让屏幕全屏起来。类似于F11:
百度了下,用javascript即可实现,效果几乎和F11类似,只有一个问题到现在没有解决,即,当body背景设置为半透明或者不设置的时候,全屏后背景为黑色,而F11全屏和不全屏背景色没有任何变化。当然,如果body的背景色设置为不透明的颜色,这个问题就没了。
首先第一步,定义两个全屏和退出全屏的函数:
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
function exitFullScreen(el) {
var el= document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
第二步:设置全屏的容器和全屏按钮,这个全屏的ID可以加在容器上,也可以加在body上:
全屏按钮
这里放的是你网站的内容。。。。。。。
第三步:给全屏按钮添加事件:
var btn = document.getElementById('btn');
var content = document.getElementById('content');
btn.onclick = function(){
fullScreen(content);
}
var quite = document.getElementById('quite');
quite.onclick = function(){
exitFullScreen();
}
以上代码不仅可以实现整个document全屏预览,还能实现特定的div来进行全屏预览。