浏览器全屏功能实现
通过浏览器自带的requestFullscreen方式实现全屏
通过浏览器自带的exitFullscreen方式实现退出全屏
<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<div onclick="toggleFull()">进入全屏</div>
<div onclick="toggleFull()">退出全屏</div>
<div>
<img
src="https://file03.16sucai.com/2017/1100/16sucai_p569c197_875.JPG"
id="img"
/>
</div>
<script>
function toggleFull(e) {
//获取全屏的元素
if (!document.fullscreenElement) {
//进入页面全屏
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
//退出全屏
document.exitFullscreen();
}
}
}
</script>
</body>
</html>
效果图如下
单个元素全屏 img或是video之类标签很适合
针对点击的元素进行全屏，使用 e.target.requestFullscreen();方法
<!DOCTYPE html>
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<div>
<img
src="https://file03.16sucai.com/2017/1100/16sucai_p569c197_875.JPG"
id="img"
/>
</div>
<script>
document.getElementById("img").addEventListener("click", Full);
function Full(e) {
//获取全屏的元素
if (!document.fullscreenElement) {
//进入页面全屏
e.target.requestFullscreen();
} else {
if (document.exitFullscreen) {
//退出全屏
document.exitFullscreen();
}
}
}
/// //
</script>
</body>
</html>
效果图如下
