CSS实战笔记(七) 全屏切换

1、效果演示

2、完整代码

index.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'))
})

【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】