全屏模式的打开与关闭

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="请关注：qq:571247942，微信：xr571247942">
  <meta name="Keywords" content="请关注：qq:571247942，微信：xr571247942">
  <meta name="Description" content="请关注：qq:571247942，微信：xr571247942">
  <title>全屏模式请关注：qq:571247942</title>
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <style type="text/css">
		*{ margin:0px; padding:0px;border:0px}
		html{ height:100%; overflow:hidden;}
		body{ background:#996699; height:100%;}
		.dv_abs{position:absolute;background:#00ccff;}
		.dv_top{ height:70px; left:10px; top:10px; right:10px;text-align:center;}
		.dv_left{ width:300px; left:10px; top:90px; bottom:90px;}
		.dv_right{ left:320px; right:10px; top:90px; bottom:90px;}
		.dv_bottom{height:70px; left:10px; right:10px; bottom:10px;}
		.dv_a:link    {color:#3300ff;}
		.dv_a:visited {color:#0000ff;}
		.dv_a:hover   {color:#ff0000;}
		.dv_a:active  {color:#cccc33;}
		.dv_p{background:#cccc33;width:200px;}
		.dv_p:active{
			color:#660099;
			transform:scale(45%);
			-ms-transform:rotate(45%); 	/* IE 9 */
			-moz-transform:rotate(45%); 	/* Firefox */
			-webkit-transform:rotate(45%); /* Safari 和 Chrome */
			-o-transform:rotate(45%); 	/* Opera */
		} 
		.dv_fs{width:30px;height:30px;display:block;margin:auto;}
		.dv_fsc{background:url('../image/图标/fse1.png') no-repeat center;background-size:cover;}
		.dv_fsc:hover{background:url('../image/图标/fse2.png') no-repeat center;background-size:cover;}
		.dv_fse{background:url('../image/图标/fsc1.png') no-repeat center;background-size:cover;}
		.dv_fse:hover{background:url('../image/各种图标/fsc2.png') no-repeat center;background-size:cover;}
</style>
	
</head>
	<body> 
		<div class="dv_abs dv_top">
			<a class="dv_fs dv_fsc" onclick="requestFullScreen();">打开</a>
			<a class="dv_fs dv_fse" onclick="exitFullscreen();">关闭</a>
		</div>
		<div class="dv_abs dv_left"></div>
		<div class="dv_abs dv_right">
			<p class="dv_p">我是p（段落）标签</p><a class="dv_a" href="#">我是a标签</a>
		</div>
		<div class="dv_abs dv_bottom"></div>
	</body>
<script>	

	$(".dv_fse").fadeOut(10);//隐藏收缩
    function requestFullScreen() {
		var de = document.documentElement;
		if (de.requestFullscreen) {
			de.requestFullscreen();
		} else if (de.mozRequestFullScreen) {
			de.mozRequestFullScreen();
		} else if (de.webkitRequestFullScreen) {
			de.webkitRequestFullScreen();
		}
		$(".dv_fse").fadeIn(500);	//显示收缩
		$(".dv_fsc").fadeOut(10);//隐藏扩展

	}
	//退出全屏
	function exitFullscreen() {
		var de = document;
		if (de.exitFullscreen) {
			de.exitFullscreen();
		} else if (de.mozCancelFullScreen) {
			de.mozCancelFullScreen();
		} else if (de.webkitCancelFullScreen) {
			de.webkitCancelFullScreen();
		}
		$(".dv_fsc").fadeIn(500);	//显示扩展
		$(".dv_fse").fadeOut(10);//隐藏收缩
	}
</script>
</html>

由于公司需要显示一个全屏的页面，所以就造了一个；

代码已经上来了，有两点要注意的：

1、jQuery记得引用一个自己本地的js，不然$符号不起作用，

2、在样式那里，背景图片路径，可以的话，引用一个自己本地下载好的；

全屏模式的打开与关闭

猜你喜欢