JS实现全屏的四种写法
JS或jQuery实现全屏
JS写法一
.html
<divclass="container" <buttonid="full-screen">全屏</button> <buttonid="exit-fullscreen">退出</button> </div>
.css
/*Basicelementstyles*/
html{
color:#000;
background:paleturquoise;
min-height:100%;
}
/*Structure*/
.container{
text-align:center;
width:500px;
min-height:600px;
background:#fff;
border:1pxsolid#ccc;
border-top:none;
margin:20pxauto;
padding:20px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:1px1px10px#000;
-moz-box-shadow:1px1px10px#000;
-webkit-box-shadow:1px1px5px#000;
}
button{
margin:200pxauto;
width:100px;
height:30px;
background-color:aliceblue;
}
/*Fullscreen*/
html:-moz-full-screen{
background:blue;
}
html:-webkit-full-screen{
background:blue;
}
html:-ms-fullscreen{
background:blue;
width:100%;/*neededtocentercontentsinIE*/
}
html:fullscreen{
background:blue;
}
.js
(function(){
varviewFullScreen=document.getElementById("full-screen");
if(viewFullScreen){
viewFullScreen.addEventListener("click",function(){
vardocElm=document.documentElement;
if(docElm.requestFullscreen){
docElm.requestFullscreen();
}
elseif(docElm.msRequestFullscreen){
docElm.msRequestFullscreen();
}
elseif(docElm.mozRequestFullScreen){
docElm.mozRequestFullScreen();
}
elseif(docElm.webkitRequestFullScreen){
docElm.webkitRequestFullScreen();
}
},false);
}
varcancelFullScreen=document.getElementById("exit-fullscreen");
if(cancelFullScreen){
cancelFullScreen.addEventListener("click",function(){
if(document.exitFullscreen){
document.exitFullscreen();
}
elseif(document.msExitFullscreen){
document.msExitFullscreen();
}
elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
elseif(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
},false);
}
varfullscreenState=document.getElementById("fullscreen-state");
if(fullscreenState){
document.addEventListener("fullscreenchange",function(){
fullscreenState.innerHTML=(document.fullscreenElement)?"":"not";
},false);
document.addEventListener("msfullscreenchange",function(){
fullscreenState.innerHTML=(document.msFullscreenElement)?"":"not";
},false);
document.addEventListener("mozfullscreenchange",function(){
fullscreenState.innerHTML=(document.mozFullScreen)?"":"not";
},false);
document.addEventListener("webkitfullscreenchange",function(){
fullscreenState.innerHTML=(document.webkitIsFullScreen)?"":"not";
},false);
}
})();
JS写法二
.html
<divstyle="margin:0auto;height:600px;width:700px;"> <buttonid="btn">全屏</button> <divid="content"style="margin:0auto;height:500px;width:700px;background:#ccc;"> <h1>全屏展示和退出全屏</h1> </div> </div>
.js
document.getElementById("btn").onclick=function(){
varelem=document.getElementById("content");
requestFullScreen(elem);
/*
注意这里的样式的设置表示全屏显示之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏里把样式还原回去
(见写法三)
*/
elem.style.height='800px';
elem.style.width='1000px';
};
functionrequestFullScreen(element){
varrequestMethod=element.requestFullScreen||element.webkitRequestFullScreen||element.mozRequestFullScreen||element.msRequestFullScreen;
if(requestMethod){
requestMethod.call(element);
}elseif(typeofwindow.ActiveXObject!=="undefined"){
varwscript=newActiveXObject("WScript.Shell");
if(wscript!==null){
wscript.SendKeys("{F11}");
}
}
}
JS写法三
.html
<divstyle="margin:0auto;height:600px;width:700px;"> <divid="content"style="margin:0auto;height:500px;width:700px;background:#ccc;"> <buttonid="btn">全屏</button> <h1>全屏展示和退出全屏</h1> <buttonid="btnn">退出</button> </div> </div>
.js
document.getElementById("btn").onclick=function(){
varelem=document.getElementById("content");
requestFullScreen(elem);
/*
注意这里的样式的设置表示全屏显示之后的样式，
退出全屏后样式还在，
若要回到原来样式，需在退出全屏里把样式还原回去
*/
elem.style.height='800px';
elem.style.width='1000px';
};
document.getElementById("btnn").onclick=function(){
exitFullscreen();
};
/*
全屏显示
*/
functionrequestFullScreen(element){
varrequestMethod=element.requestFullScreen||element.webkitRequestFullScreen||element.mozRequestFullScreen||element.msRequestFullScreen;
requestMethod.call(element);
};
/*
全屏退出
*/
functionexitFullscreen(){
varelem=document;
varelemd=document.getElementById("content");
if(elem.webkitCancelFullScreen){
elem.webkitCancelFullScreen();
}elseif(elem.mozCancelFullScreen){
elemd.mozCancelFullScreen();
}elseif(elem.cancelFullScreen){
elem.cancelFullScreen();
}elseif(elem.exitFullscreen){
elem.exitFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
};
/*
退出全屏后样式还原
*/
elemd.style.height='500px';
elemd.style.width='700px'
}
jQuery写法四
.html
<divid="cont"STYLE="width:500px;height:300px;background-color:aliceblue;margin:auto"> <buttonid="btn">全屏&退出</button> </div>
.css
.full{
position:fixed;
align-content:center;
/*top:10px;*/
/*left:10px;*/
/*
原来基础的百分百
*/
width:100%;
height:100%;
overflow:auto;
}
fullScreen.js
(function($){
//AddinganewtesttothejQuerysupportobject
$.support.fullscreen=supportFullScreen();
//Creatingtheplugin
$.fn.fullScreen=function(props){
if(!$.support.fullscreen||this.length!=1){
//Theplugincanbecalledonly
//ononeelementatatime
returnthis;
}
if(fullScreenStatus()){
//ifwearealreadyinfullscreen,exit
cancelFullScreen();
returnthis;
}
//Youcanpotentiallypastwoargumentsacolor
//forthebackgroundandacallbackfunction
varoptions=$.extend({
'background':'#111',
'callback':function(){}
},props);
//Thistemporarydivistheelementthatis
//actuallygoingtobeenlargedinfullscreen
varfs=$('<div>',{
'css':{
'overflow-y':'auto',
'background':options.background,
'width':'100%',
'height':'100%',
'align':'center'
}
});
varelem=this;
//Youcanusethe.fullScreenclassto
//applystylingtoyourelement
elem.addClass('fullScreen');
//Insertingourelementinthetemporary
//div,afterwhichwezoomitinfullscreen
fs.insertBefore(elem);
fs.append(elem);
requestFullScreen(fs.get(0));
fs.click(function(e){
if(e.target==this){
//Iftheblackbarwasclicked
cancelFullScreen();
}
});
elem.cancel=function(){
cancelFullScreen();
returnelem;
};
onFullScreenEvent(function(fullScreen){
if(!fullScreen){
//Wehaveexitedfullscreen.
//Removetheclassanddestroy
//thetemporarydiv
elem.removeClass('fullScreen').insertBefore(fs);
fs.remove();
}
//Callingtheusersuppliedcallback
options.callback(fullScreen);
});
returnelem;
};
//Thesehelperfunctionsavailableonlytoourpluginscope.
functionsupportFullScreen(){
vardoc=document.documentElement;
return('requestFullscreen'indoc)||
('mozRequestFullScreen'indoc&&document.mozFullScreenEnabled)||
('webkitRequestFullScreen'indoc);
}
functionrequestFullScreen(elem){
if(elem.requestFullscreen){
elem.requestFullscreen();
}elseif(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}elseif(elem.webkitRequestFullScreen){
elem.webkitRequestFullScreen();
}
}
functionfullScreenStatus(){
returndocument.fullscreen||
document.mozFullScreen||
document.webkitIsFullScreen;
}
functioncancelFullScreen(){
if(document.exitFullscreen){
document.exitFullscreen();
}elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}elseif(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
}
functiononFullScreenEvent(callback){
$(document).on("fullscreenchangemozfullscreenchangewebkitfullscreenchange",function(){
//Thefullscreenstatusisautomatically
//passedtoourcallbackasanargument.
callback(fullScreenStatus());
});
}
})(jQuery);
myJS.js
$(function(){
$("#btn").click(function(){
$("#cont").fullScreen();
})
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。