论坛 › 马黑黑教程专版 › 书中自有颜如玉代码

马黑黑 发表于 2022-4-28 22:29

书中自有颜如玉代码

做的时候发现有些辅助性质的CSS定义与论坛的重合，改了一下才正常。代码发布在此方便大家学习：

<style>
.book {
        left: -214px;
        display: flex;
        align-items: center;
        width: 1024px;
        height: 700px;
        perspective: 3000px;
        cursor: pointer;
        padding: 10px;
        position: relative;
}
.page {
        padding: 20px;
        width: 478px;
        height: 670px;
        left: 50%;
        background-color: rgba(75,92,92,1);
        background: linear-gradient(to right, rgba(75,92,92,1) 0%, rgba(47,79,79,1) 1%, rgba(105,105,105,1) 100%);
        box-shadow: inset -10px -3px 6px rgba(1,12,12,1), 1px 1px 20px rgba(0,0,0,.15);
        box-shadow: inset -2px 2px 6px rgba(255,255,255,.1), 1px 1px 20px rgba(0,0,0,.15);
        transform-origin: left;
        transform-style: preserve-3d;
        position: absolute;
}
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }
.page p { margin: 0; padding: 4px 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #888; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #888; font-size: 10px; }
.tit { writing-mode: vertical-lr; font: bold 3em / 4em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
@keyframes rot1{
        from { transform: rotateY(0deg); }
        to { transform: rotateY(-180deg); }
}
@keyframes rot2{
        from { transform: rotateY(-180deg); }
        to { transform: rotateY(0deg); }
}
</style>

<div class="book">
        <div class="page">
                <div>
                        <p class="rnum">All in here</p>
                        <p style="text-align: right; color: #888; font-size: 12px;">马<br>黑</p>
                        <p class="tit">書中自有顏如玉</p>
                </div>
                <div style="background:url('https://638183.freep.cn/638183/t22/h1.jpg') no-repeat center/cover"><p>　开卷有益　看图洗眼</p></div>
        </div>
        <div class="page">
                <div style="background:url('https://638183.freep.cn/638183/t22/h2.jpg') no-repeat center/cover"><p class="rnum">1</p></div>
                <div style="background:url('https://638183.freep.cn/638183/t22/h3.jpg') no-repeat center/cover"><p class="lnum">2</p></div>
        </div>
        <div class="page">
                <div style="background:url('https://638183.freep.cn/638183/t22/h4.jpg') no-repeat center/cover"><p class="rnum">3</p></div>
                <div style="background:url('https://638183.freep.cn/638183/t22/h5.jpg') no-repeat center/cover"><p class="lnum">4</p></div>
        </div>
        <div class="page">
                <div style="background:url('https://638183.freep.cn/638183/t22/h6.jpg') no-repeat center/cover"><p class="rnum">5</p></div>
                <div style="background:url('https://638183.freep.cn/638183/t22/h7.jpg') no-repeat center/cover"><p class="lnum">6</p></div>
        </div>
        <div class="page">
                <div style="background:url('https://638183.freep.cn/638183/t22/h8.jpg') no-repeat center/cover"><p class="rnum">-End-</p></div>
                <div><p class="rnum">花潮出版社出版<br>正版價: ￥99.99</p></div>
        </div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;

setzIdx();

document.querySelector(".book").onclick = function(){
        if(idx == 0){ //前翻
                page.style.animation = "rot1 .5s linear forwards";
                page.children.style.display = "none";
                page.children.style.display = "block";
                page.children.style.transform = "rotateY(-180deg)";
                currentPage ++;
                if(currentPage == all){
                        idx = 1;
                        currentPage = all - 1;
                }
        } else { //后翻
                page.style.animation = "rot2 .5s linear forwards";
                page.children.style.display = "none";
                page.children.style.display = "block";
                page.children.style.transform = "rotateY(0deg)";
                currentPage --;
                if(currentPage < 0){
                        idx = 0;
                        currentPage = 0;
                }
        }
        setzIdx();
}

function setzIdx(){
        for(j=0; j<all; j++){
                page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
        }
        if(page.style.zIndex <= all) page.style.zIndex = all;
}
</script>

朵拉 发表于 2022-4-28 22:51

这个教程 有空学习下{:4_190:}

马黑黑 发表于 2022-4-28 23:02

朵拉 发表于 2022-4-28 22:51
这个教程 有空学习下

这个代码量偏大，但要弄的是HTML部分就好

樵歌 发表于 2022-4-29 06:44

这个是不是东篱那翻图红影那翻花花吧

马黑黑 发表于 2022-4-29 06:51

樵歌 发表于 2022-4-29 06:44
这个是不是东篱那翻图红影那翻花花吧

是同一个东东，还在开发中，他们几个率先使用了。只有投入使用，才能发现问题所在

樵歌 发表于 2022-4-29 06:59

马黑黑 发表于 2022-4-29 06:51
是同一个东东，还在开发中，他们几个率先使用了。只有投入使用，才能发现问题所在

觉得他们都 弄得挺好的牙。

马黑黑 发表于 2022-4-29 07:10

樵歌 发表于 2022-4-29 06:59
觉得他们都 弄得挺好的牙。

东篱和队长的有问题呢，他们发图片的代码用的是东方常用的代码，这是论坛专用代码，图片能跟随鼠标滑轮变大小的那个，用在书里是不可以的

红影 发表于 2022-4-29 09:42

黑黑辛苦了，这个颜如玉的翻页书真好，信息量很大{:4_199:}

马黑黑 发表于 2022-4-29 10:14

红影 发表于 2022-4-29 09:42
黑黑辛苦了，这个颜如玉的翻页书真好，信息量很大

嗯，玉儿是有信息的{:4_170:}

红影 发表于 2022-4-29 22:52

马黑黑 发表于 2022-4-29 10:14
嗯，玉儿是有信息的

从里面可以学到不少东西呢。

马黑黑 发表于 2022-4-30 08:46

红影 发表于 2022-4-29 22:52
从里面可以学到不少东西呢。

如此甚好

加林森 发表于 2022-4-30 17:48

来学习

红影 发表于 2022-4-30 22:22

马黑黑 发表于 2022-4-30 08:46
如此甚好

黑黑辛苦了{:4_190:}

马黑黑 发表于 2022-4-30 22:45

红影 发表于 2022-4-30 22:22
黑黑辛苦了

不辛苦不辛苦，玩玩而已

红影 发表于 2022-5-2 07:14

马黑黑 发表于 2022-4-30 22:45
不辛苦不辛苦，玩玩而已

玩玩还带来了美好的视觉享受，美人如玉{:4_173:}

马黑黑 发表于 2022-5-2 09:27

红影 发表于 2022-5-2 07:14
玩玩还带来了美好的视觉享受，美人如玉

那是多多益善的

红影 发表于 2022-5-2 11:16

马黑黑 发表于 2022-5-2 09:27
那是多多益善的

这样的玩对身心都有好处的。

马黑黑 发表于 2022-5-2 11:29

红影 发表于 2022-5-2 11:16
这样的玩对身心都有好处的。

也许吧，我不太清楚

红影 发表于 2022-5-2 14:26

马黑黑 发表于 2022-5-2 11:29
也许吧，我不太清楚

可以锻炼大脑，防止痴呆{:4_173:}

马黑黑 发表于 2022-5-2 17:25

红影 发表于 2022-5-2 14:26
可以锻炼大脑，防止痴呆

那敢情好

查看完整版本: 书中自有颜如玉代码