书本翻页效果源码

共计6159字,阅读大约21分钟。

演示

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书本翻页</title>
    <style>
        :root {
            --w: 240px; 
            --h: 240px; 
        }
        body {
            margin: 0;
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #0c1c38;
        }

        #book {
            height: var(--h);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 1s;
            perspective: 1600px;
            transform-style: preserve-3d;
        }
        .book-cover {
            /* 封面比页面每条边宽25px */
            height: calc(var(--h) + 50px);
            width: calc(var(--w) + 50px);
            position: absolute;
            background-image: linear-gradient(to bottom, #ff5c33, #ff9166, #3dd6f5);
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            transition: 1s;
            transform-origin: left;
            backface-visibility: visible;
            border: .5px solid black;
        }
        .book-page {
            height: var(--h);
            width: var(--w);
            position: absolute;
            z-index: 100;
            transition: 1s;
            /* 封面比页面每条边宽的长度 */
            transform-origin: -25px;
            background-size: cover;
            backface-visibility: visible;
        }

        #control {
            margin-top: 60px;
            user-select: none;
        }
        #control button {
            display: inline-block;
            width: 45px;
            height: 45px;
            border: 0;
            margin: 0px 15px;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            border-radius: 50%;
            background-color: rgba(63,63,63,.8);
            outline: none;
        }
    </style>
</head>
<body>
    <div id="book">
        <div class="book-cover one-page"></div>

        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>
        <div class="book-page one-page"></div>

        <div class="book-cover one-page"></div>
    </div>
    <div id="control">
        <button><</button>
        <button>></button>
    </div>

    <script>
        // 总页数
        const PAGECOUNT = 12
        // 当前页面编号
        let pageNo = 0

        // 内容页
        let pages = document.querySelectorAll('.book-page')
        // 封面页
        let cover = document.querySelectorAll('.book-cover')
        // 按钮
        let btn = document.querySelectorAll('#control button')
        // 
        let book = document.querySelector('#book')
        // 所有页
        let allPages = document.querySelectorAll('.one-page')

        function init() {
            // 初始化内容页的图片
            for (let index = 0; index < pages.length; index++) {
                pages[index].style.backgroundImage = "url('https://seclusion.oss-cn-hangzhou.aliyuncs.com/cdn/demo/CodeSnippet/%E4%B9%A6%E6%9C%AC%E7%BF%BB%E9%A1%B5/" + [index+1] + ".jpg')"
                pages[index].style.zIndex = PAGECOUNT - index - 1
            }
            cover[0].style.zIndex = PAGECOUNT
            cover[1].style.zIndex = 1

            // 默认页面为封面,左按钮无效
            btn[0].style.backgroundColor = "rgba(110, 110, 110, 0.5)"
            btn[0].style.color = "darkgray"
            btn[0].disabled = true
            
            // 左翻页
            btn[0].onclick = function() {
                pageNo -- 
                // 如果当前是最后一页,并往前翻
                if ((PAGECOUNT - 1) == pageNo) {
                    allPages[pageNo].style.transform = 'rotateY(0deg)'
                    //( 240px + 50px ) * 0.5
                    book.style.transform = 'translateX(145px)'
                    btn[1].style.backgroundColor = "rgba(63, 63, 63, 0.8)"
                    btn[1].style.color = "white"
                    btn[1].disabled = false   
                }
                else {
                    allPages[pageNo].style.transform = 'rotateY(0deg)'
                }
                allPages[pageNo].style.zIndex = PAGECOUNT - pageNo

                if( 0 == pageNo ) {
                    btn[0].style.backgroundColor = "rgba(110, 110, 110, 0.5)"
                    btn[0].style.color = "darkgray"
                    btn[0].disabled = true
                    book.style.transform = 'translateX(0px)'
                }
            }

            // 右翻页
            btn[1].onclick = function() {
                // 如果当前是第一页,并往后翻
                if ( 0 == pageNo ) {
                    allPages[pageNo].style.transform = 'rotateY(-180deg)'
                    //( 240px + 50px ) * 0.5
                    book.style.transform = 'translateX(145px)'
                    btn[0].style.backgroundColor = "rgba(63, 63, 63, 0.8)"
                    btn[0].style.color = "white"
                    btn[0].disabled = false   
                }
                else {
                    allPages[pageNo].style.transform = 'rotateY(-180deg)'
                }

                allPages[pageNo].style.zIndex = 1000 + pageNo
                pageNo ++

                if( PAGECOUNT == pageNo ) {
                    btn[1].style.backgroundColor = "rgba(110, 110, 110, 0.5)"
                    btn[1].style.color = "darkgray"
                    btn[1].disabled = true
                    book.style.transform = 'translateX(300px)'
                }
            }
        }
        init()
    </script>
</body>
</html>
温馨提示:本文最后更新于2022-08-10 04:31:46,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞8当赏 分享
箴言区 抢沙发
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片