將div全屏與退出全屏,一般播放器使用較多。
不多說 直接上代碼
//html部分
<button οnclick="showFull();">全屏</button>
<button οnclick="delFull();">退出全屏 </button>
//js調用
function showFull(){
var full=document.getElementById("container");
launchIntoFullscreen(full);
}
function delFull() {
exitFullscreen();
}
//全屏方法封裝:
function launchIntoFullscreen(element) {
if(element.requestFullscreen){
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
//退出全屏方法封裝:
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
//監聽window是否全屏,並進行相應的操作,支持esc鍵退出
window.onresize = function() {
var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen ||
document.msFullscreenElement || document.fullscreenElement
);//!document.webkitIsFullScreen都爲true。因此用!!
if (isFull==false) {
$(".fullScreen").css("display","block");
$(".exit").css("display","none");
}else{
$(".exit").css("display","block");
$(".fullScreen").css("display","none");
}
}
// 補充:
// !和!!的區別
// ! 變量轉換成boolean類型判斷,null、undefined和空字符串取反都爲false,其餘都爲true。
// !! 用來做類型判斷
// if(a!=null&&typeof(a)!=undefined&&a!=’’){}
// 等價於if(!!a){}
/
/
/
/
/
/
/
參考自:http://blog.sina.com.cn/s/blog_1458577430102xn4r.html