zex-fullscreen
A JavaScript library for full screen web pages.
Installation
In a browser:
<script src="zex-fullscreen.js"></script>Using npm:
$ npm install zex-fullscreenNote: add --save if you are using npm < 5.0.0
How to use:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #fafafa;
}
button {
line-height: 1.499;
position: relative;
display: inline-block;
font-weight: 400;
white-space: nowrap;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
user-select: none;
touch-action: manipulation;
height: 32px;
padding: 0 15px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
button:active,
button:hover,
button:focus,
button:visited {
color: #fff;
background-color: #096dd9;
border-color: #096dd9;
}
</style>
</head>
<body>
<div id="container">
<button onclick="toggleFullScreen(document.documentElement)">文档全屏/退出全屏</button>
<button onclick="toggleFullScreen(document.getElementById('container'))" style="margin-top: 20px">
父容器全屏/退出全屏
</button>
</div>
<script src="../dist/zex-fullscreen.min.js"></script>
<script>
function toggleFullScreen(element) {
zexFullscreen.toggleFullscreen(element)
}
window.addEventListener('fullscreen-change', ({ detail: { status } }) => {
console.log(status ? '进入全屏' : '退出全屏')
})
</script>
</body>
</html>