东篱的鹧鸪天代码

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

JS部分 setzIdx 函数有修正，CSS加入控制图片尺寸的代码，HTML图片代码全部使用原生img标签：

<style>
.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 620px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 410px;
height: 600px;
left: 50%;
border-left: 1px solid #DCDCDC;
transform-origin: left;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
transform-style: preserve-3d;
position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
.page img { width: 100%; height: 100%; }
@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><img src="https://s1.ax1x.com/2022/04/28/LXyTfJ.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/28/LXuB3n.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/28/LXuTu6.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/28/LXujCd.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/28/LXKFUg.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/28/LXKKbT.jpg" alt="" /></div>
</div>

<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/28/LXK8PJ.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/28/LXKsGd.jpg" alt="" /></div>
</div>

<div class="page">
<div><img src="https://s1.ax1x.com/2022/04/28/LXKfZ8.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/04/28/LXyXm6.jpg" alt="" /></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 23:27

本地测试是没问题的

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

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

东篱的制作很用心，准备工作做得充足，所以已弄好图片img代码，效果立马刚刚的

东篱闲人 发表于 2022-4-29 10:28

黑黑是个好大夫，妙手回春！{:5_116:}

东篱闲人 发表于 2022-4-29 10:28

{:4_187:}

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

东篱闲人发表于 2022-4-29 10:28
黑黑是个好大夫，妙手回春！

也没啥，只是改改img代码

东篱闲人 发表于 2022-4-29 10:34

马黑黑发表于 2022-4-29 07:25
东篱的制作很用心，准备工作做得充足，所以已弄好图片img代码，效果立马刚刚的

也没咋用心，书皮做的认真一点，里面是对付的。。。{:4_189:}

东篱闲人 发表于 2022-4-29 10:36

马黑黑发表于 2022-4-29 10:34
也没啥，只是改改img代码

一般人改不了，你牛！大牛！{:5_116:}

马黑黑 发表于 2022-4-29 11:00

东篱闲人发表于 2022-4-29 10:36
一般人改不了，你牛！大牛！

懂原理就行的

马黑黑 发表于 2022-4-29 11:01

东篱闲人发表于 2022-4-29 10:34
也没咋用心，书皮做的认真一点，里面是对付的。。。

嗯，包装最重要{:5_117:}

东篱闲人 发表于 2022-4-29 11:04

马黑黑发表于 2022-4-29 11:01
嗯，包装最重要

主要对成功还没啥把握，试探性的。。。{:5_117:}

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

东篱闲人发表于 2022-4-29 11:04
主要对成功还没啥把握，试探性的。。。

不错的，感觉很爽

红影发表于 2022-4-29 11:17

看到这个，我也想去做个玩了{:4_173:}

小九发表于 2022-4-29 11:34

制作得漂亮{:4_199:}

马黑黑 发表于 2022-4-29 11:37

小九发表于 2022-4-29 11:34
制作得漂亮

东篱在这方面是高手

小九发表于 2022-4-29 11:37

马黑黑发表于 2022-4-29 11:37
东篱在这方面是高手

你也是高手，高高手{:5_116:}

马黑黑 发表于 2022-4-29 11:39

小九发表于 2022-4-29 11:37
你也是高手，高高手

我哪里行，跟在东篱后面瞎鼓捣

东篱闲人 发表于 2022-4-29 12:19

马黑黑发表于 2022-4-29 11:37
东篱在这方面是高手

可别闹，俺在你面前就是个学徒。。。{:5_112:}

马黑黑 发表于 2022-4-29 12:23

东篱闲人发表于 2022-4-29 12:19
可别闹，俺在你面前就是个学徒。。。

胡说，你是教授

页: [1] 2

花潮论坛's Archiver

东篱的鹧鸪天代码