实现页面单个dom节点全屏效果

创建一个的html页面，指定要实现全屏的dom节点

我这里指定class名为main的节点为全屏的dom。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			div{height: 200px;text-align: center;line-height: 200px;color: #fff;}
			.header{
				background: red;
			
			}
			.main{
				background: green;
			}
			.footer{
				background: black;
			}
		</style>
	</head>
	<body>
		<div class="header">头部</div>
		<div class="main">
			主体
			<button class="exitFullBtn">退出全屏</button>
		</div>
		<div class="footer">底部</div>
	</body>
</html>

先记录节点的宽高

var main = {
		width:$(".main").width(),
		height:$(".main").height()
	}

调出全屏

$(".main").click(function(){
		var dom = $(".main")[0]
		var width = window.screen.width;
		var height = window.screen.height;
		$(".main").css({
			'width': width,
			'height': height,
		});//在进入全屏时改变Dom的宽高
		
		var ele = document.documentElement
 		,reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen 
	      || ele.mozRequestFullScreen || ele.msRequestFullscreen;      
	      if(typeof reqFullScreen !== 'undefined' && reqFullScreen) {
	        reqFullScreen.call(dom);
	      };
	})

退出全屏的方法

function exitFull(){  //退出全屏操作
		var dom = $('.main')[0];
		$(".main").css({
			'width': main.width,//在点击进入全屏前需记录原先的宽高，这里赋值后再退出全屏
			'height': main.height,
		});
		
		if (document.exitFullscreen) {  
	        document.exitFullscreen();  
      	} else if (document.mozCancelFullScreen) {  
	        document.mozCancelFullScreen();  
      	} else if (document.webkitCancelFullScreen) {  
	        document.webkitCancelFullScreen();  
      	} else if (document.msExitFullscreen) {  
	        document.msExitFullscreen();
      	}
	}

判断是否处于全屏状态

function checkFull(){  //判断是否处于全屏状态
		var isFull =  document.mozCancelFullScreen || window.oRequestFullscreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
		if(isFull === undefined) isFull = false;
		return isFull;
	}

退出全屏的点击事件和通过监听设备宽高的变化来确定是否退出全屏

window.onresize = function(){  //监听设备宽高的变化
		if(!checkFull()){
			
			exitFull();//要执行的函数
			//要执行的动作
		}
	}
	
	$(".exitFullBtn").click(function(){  //点击退出全屏按钮
		exitFull();//要执行的函数
	})

实现页面单个dom节点全屏效果

猜你喜欢