html 全屏模式的打开与关闭

最新推荐文章于 2023-12-10 14:58:04 发布

逸曦穆泽

最新推荐文章于 2023-12-10 14:58:04 发布

阅读量340

点赞数

分类专栏： web前端 javascript_jQuery 文章标签：全屏模式

本文链接：https://blog.csdn.net/qq_41408081/article/details/83507938

版权

web前端同时被 2 个专栏收录

65 篇文章 2 订阅

订阅专栏

javascript_jQuery

21 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>迷之自信</title>
  <!--<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.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>

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

代码已经上来了，要注意的：在样式那里，背景图片路径，可以的话，引用一个自己本地下载好的；