瀏覽器全屏功能實現
通過瀏覽器自帶的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>
效果圖如下
