screenfull实现网页或元素全屏切换效果代码-html代码-BFW代码库

screenfull实现网页或元素全屏切换效果代码

代码语言：html

所属分类：其他

代码描述：screenfull实现网页或元素全屏切换效果代码，支持图片元素单独全屏、支持退出全屏和文档全屏。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<style>
		html {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			padding: 30px 10px 0 0;
			font-size: 20px;
			line-height: 1.4;
			color: #737373;
			background: #f0f0f0;
			-webkit-font-smoothing: antialiased;
		}

		hr {
			border: none;
			border-top: 1px solid #e6e6e6;
			margin: 20px 0;
		}

		a {
			color: #666;
		}

		h1 {
			margin: 0;
			font-size: 40px;
			text-align: center;
		}

		h1 span {
			color: #bbb;
		}

		ul {
			padding: 0 0 0 40px;
			margin: 1em 0;
		}

		button {
			font-size: 13px;
		}

		nav {
			margin: 0 auto;
		}

		.container {
			width: 500px;
			margin: 0 auto;
		}

		#repo-link {
			text-align: center;
			text-decoration: none;
			display: block;
			position: absolute;
			top: 20px;
			left: 20px;
		}

		#social {
			margin: 10px auto;
			text-align: center;
		}

		#container {
			width: 500px;
			padding: 30px 20px;
			margin: 0 auto 50px auto;
			background: #fcfcfc;
			text-align: center;
			border: 1px solid #b3b3b3;
			border-radius: 4px;
			box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
		}

		#container ul {
			padding: 0;
			margin: 40px 0 0 0;
			list-style: none;
		}

		#demo-img {
			width: 100%;
			height: auto;
		}

		#demo-img,
		#demo-video {
			cursor: pointer;
		}

		header p {
			font-size: 17px;
		}
		</style>
</head>
<body>

<section>

<button id="request">触发全屏</button>
<button id="exit">退出全屏</button>
<button id="toggle">切换全屏</button>
<button id="request2">文档全屏</button>
</section>
<section>
<ul>
<li id="supported"></li>
<li id="status"></li>
<li id="element"></li>
</ul>
</section>
<input autofocus placeholder="Keyboard test">
<hr>
<section>
<p>点击图片触发全屏显示</p>
<img id="demo-img" src="//repo.bfw.wiki/bfwrepo/image/64d18.........完整代码请登录后点击上方下载按钮下载查看