全屏

window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态
window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态
//跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable(){
	var isFullscreen = document.fullscreenEnabled ||
	window.fullScreen ||
	document.mozFullscreenEnabled ||
	document.webkitIsFullScreen;
	return isFullscreen;
}
//全屏
var fScreen = function(){
	var docElm = document.documentElement;
	if (docElm.requestFullscreen) {
	  docElm.requestFullscreen();
	}
	else if (docElm.msRequestFullscreen) {
	  docElm.msRequestFullscreen();
	  ieIsfSceen = true;
	}
	else if (docElm.mozRequestFullScreen) {
	  docElm.mozRequestFullScreen();
	}
	else if (docElm.webkitRequestFullScreen) {
	  docElm.webkitRequestFullScreen();
	}else {//对不支持全屏API浏览器的处理,隐藏不需要显示的元素
	  window.parent.hideTopBottom();
	  isflsgrn = true;
	  $("#fullscreen").text("退出全屏");
	}
}

//退出全屏
var cfScreen = function(){
	if (document.exitFullscreen) {
	  document.exitFullscreen();
	}
	else if (document.msExitFullscreen) {
	  document.msExitFullscreen();
	}
	else if (document.mozCancelFullScreen) {
	  document.mozCancelFullScreen();
	}
	else if (document.webkitCancelFullScreen) {
	  document.webkitCancelFullScreen();
	}else {
	  window.parent.showTopBottom();
	  isflsgrn = false;
	  $("#fullscreen").text("全屏");
	}
}

//全屏按钮点击事件
$("#fullscreen").click(function(){
	var isfScreen = fullscreenEnable();
	if(!isfScreen && isflsgrn == false){
	  if (ieIsfSceen == true) {
		document.msExitFullscreen();
		ieIsfSceen = false;
		return;
	  }
	  fScreen();
	}else{
	  cfScreen();
	}
})
	
//键盘操作
$(document).keydown(function (event) {
	if(event.keyCode == 27 && ieIsfSceen == true){
	  ieIsfSceen = false;
	}
});




//监听状态变化
if (window.addEventListener) {
document.addEventListener('fullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('webkitfullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('mozfullscreenchange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
document.addEventListener('MSFullscreenChange', function(){ 
  if($("#fullscreen").text() == "全屏"){
	$("#fullscreen").text("退出全屏"); 
  }else{
	$("#fullscreen").text("全屏");
  }
});
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值