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

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

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

posted @ 2019-11-08 10:23  半虹  阅读(242)  评论(0)  编辑  收藏  举报