花潮水区名人录
本帖最后由 东篱闲人 于 2022-5-10 16:36 编辑 <br /><br /><style>.book {
left: -460px;
display: flex;
align-items: center;
width: 1500px;
height: 800px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 614px;
height: 800px;
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; }
@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/05/10/Ot2kbd.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/Ot2zZj.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/10/Ot2IZd.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/OtRQW6.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/10/OtREyF.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/OtROt1.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/10/OtRr6S.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/OtWYcT.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/10/OtW9ne.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/Ot4WbF.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/10/OtWy36.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/10/Ot4559.jpg" alt="" /></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=currentPage; j<all; j++){
page.style.zIndex = all - j;
}
for(j=0; j<currentPage;j++) {
page.style.zIndex = j + 1;
}
if(currentPage == all - 1) page.style.zIndex = all;
}
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=1899981562&auto=1&height=66"></iframe><br><br><br>
老兄的制作真漂亮，佩服佩服！{:4_199:} 这本书豪华版的，团长呢，赶紧团购了{:4_187:} 封面封底和内页都很精致，东篱大哥出书了，太厉害了{:4_199:} 发现小辣椒拉下的作业太多了
老头这个和我以前的电子相册一样的效果{:4_178:} 老头真是高才，黑黑是高级教授，出来老头这个教授了{:4_172:} 老头制作太棒了！ 构思，设计都完美，{:4_204:}佩服佩服 {:4_199:} 赞！继续温暖！ {:4_179:}
东篱闲人的制作和创意都不同凡响。 加林森 发表于 2022-5-10 17:00
老兄的制作真漂亮，佩服佩服！
马马虎虎，瞎玩。。。{:4_176:} 红影 发表于 2022-5-10 19:43
封面封底和内页都很精致，东篱大哥出书了，太厉害了
嗯嗯，这个可贵啊。。。{:5_117:} 小辣椒 发表于 2022-5-10 19:47
发现小辣椒拉下的作业太多了
老头这个和我以前的电子相册一样的效果
嗯嗯嗯，异曲同工。。。{:4_190:} 大猫咪 发表于 2022-5-10 19:52
老头制作太棒了！ 构思，设计都完美，佩服佩服 赞！继续温暖！
闲的。。。{:5_117:} 梦油 发表于 2022-5-10 20:08
东篱闲人的制作和创意都不同凡响。
马马虎虎，对付玩呗。。。{:5_117:} 东篱闲人 发表于 2022-5-10 20:31
闲的。。。
老头来了，晚上好 {:4_179:} {:4_190:} 大猫咪 发表于 2022-5-10 20:33
老头来了，晚上好
嗯嗯，晚上好。。。{:4_180:} 东篱闲人 发表于 2022-5-10 20:30
马马虎虎，瞎玩。。。
瞎玩得太有水平了。。。。 加林森 发表于 2022-5-10 20:41
瞎玩得太有水平了。。。。
还得和加加学习，今天喝了吗？{:4_176:} 东篱闲人 发表于 2022-5-10 20:32
马马虎虎，对付玩呗。。。
东篱朋友辛苦了！谢谢你！
{:4_176:} 俺都成名人了{:4_170:} 东篱闲人 发表于 2022-5-10 20:42
还得和加加学习，今天喝了吗？
没有喝。。。。现在喝：{:4_176:}