1、效果演示
2、完整代码
index.html
<!DOCTYPE html>
<html>
<head>
<title>Full-Screen Toggle</title>
<link type="text/css" rel="stylesheet" href="index.css" />
</head>
<body>
<div class="page-wrapper" id="page-wrapper">
<div class="page-content content-0"></div>
<div class="page-content content-1"></div>
<div class="page-content content-2"></div>
</div>
<div class="page-tap" id="page-tap">
<div class="side-tap tap-0" data-index="0"></div>
<div class="side-tap tap-1" data-index="1"></div>
<div class="side-tap tap-2" data-index="2"></div>
</div>
<div class="page-hint" id="page-hint"></div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.css
html, body {
margin: 0;
padding: 0;
100%;
height: 100%;
overflow: hidden;
}
.page-wrapper {
100%;
position: absolute;
left: 0;
top: 0;
transition: top 600ms ease-out;
}
.page-content {
100%;
}
.content-0 {
background-color: rgba(236, 0, 140, 0.2);
}
.content-1 {
background-color: rgba(38, 230 ,0, 0.2);
}
.content-2 {
background-color: rgba(68, 200 ,245, 0.2);
}
.page-tap {
position: fixed;
top: 0%;
left: 96%;
4%;
display: flex;
flex-direction: column;
background-color: white;
}
.side-tap {
flex: 1;
}
.side-tap:hover {
cursor: pointer;
opacity: 0.4;
}
.tap-0 {
background-color: #ec008c;
opacity: 0.2;
}
.tap-1 {
background-color: #26e600;
opacity: 0.2;
}
.tap-2 {
background-color: #44c8f5;
opacity: 0.2;
}
.page-hint {
position: fixed;
top: 90%;
left: 50%;
animation: arrow-down 1200ms ease-out infinite;
}
.page-hint::before {
content: "";
position: absolute;
10px;
height: 10px;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform: rotate(-135deg);
}
.page-hint::after {
content: "";
position: absolute;
10px;
height: 10px;
border-top: 1px solid gray;
border-left: 1px solid gray;
transform: rotate(-135deg);
margin-top: 10px;
}
@keyframes arrow-down {
from { transform: translateY(0px); opacity: 0.5; }
to { transform: translateY(25px); opacity: 0; }
}
index.js
let clientHeight = document.body.clientHeight
let wrapper = document.getElementById('page-wrapper')
let tap = document.getElementById('page-tap')
let hint = document.getElementById('page-hint')
let pages = document.getElementsByClassName('page-content')
let totalPages = pages.length
wrapper.style.height = clientHeight + 'px'
tap.style.height = clientHeight + 'px'
for (let currIndex = 0; currIndex < totalPages; currIndex++) {
pages[currIndex].style.height = clientHeight + 'px'
}
let currActiveListener = {
value: 0,
get currActive() {
return this.value
},
set currActive(value) {
this.value = value
wrapper.style.top = -(value * clientHeight) + 'px'
hint.style.display = (value === totalPages - 1) ? 'none' : 'block'
}
}
let currTimer = 0
let lastTimer = 0
document.addEventListener('mousewheel', function(event) {
currTimer = new Date().getTime()
if (currTimer - lastTimer > 300) {
if (event.wheelDelta < 0 && currActiveListener.currActive < totalPages - 1) {
currActiveListener.currActive += 1
}
if (event.wheelDelta > 0 && currActiveListener.currActive > 0) {
currActiveListener.currActive -= 1
}
lastTimer = new Date().getTime()
}
})
document.getElementById('page-hint').addEventListener('click', function(){
currActiveListener.currActive = (currActiveListener.currActive + 1) % totalPages
})
document.getElementById('page-tap').addEventListener('click', function(){
currActiveListener.currActive = parseInt(window.event.path[0].getAttribute('data-index'))
})
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】