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; width: 100%; height: 100%; overflow: hidden; } .page-wrapper { width: 100%; position: absolute; left: 0; top: 0; transition: top 600ms ease-out; } .page-content { width: 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%; width: 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; width: 10px; height: 10px; border-top: 1px solid gray; border-left: 1px solid gray; transform: rotate(-135deg); } .page-hint::after { content: ""; position: absolute; width: 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')) })
