本帖最后由 加林森 于 2022-5-1 17:40 编辑 <br /><br />马黑黑 发表于 2021-12-10 20:02
那我就不客气了
好的好的
<style>
.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 500px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 392px;
height: 577px;
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://pic.imgdb.cn/item/626e029b239250f7c59fdb96.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626e0154239250f7c59d075f.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626e102c239250f7c5c31834.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626e172f239250f7c5d3c19b.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626e18c5239250f7c5d7ad0a.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626e1a14239250f7c5dad5b9.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626e4e66239250f7c558fcc6.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626e4f69239250f7c55b6e1e.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626e513a239250f7c55faf51.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626e532f239250f7c564767d.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626e54c1239250f7c5684c9e.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=5241799&auto=1&height=66"></iframe><br><br><br>
加林森 发表于 2021-12-10 20:02
好的好的
挺好挺好
马黑黑 发表于 2021-12-10 20:04
挺好挺好
继续继续
加林森 发表于 2021-12-10 20:25
继续继续
{:4_181:}
马黑黑 发表于 2021-12-10 20:25
喝起
加林森 发表于 2021-12-10 16:53
就是啊
和老一辈人没法比。
红影 发表于 2021-12-10 21:16
和老一辈人没法比。
怎么讲？
加林森 发表于 2021-12-10 21:35
怎么讲？
现在的小年轻的奉献精神不如老一辈的人。
什么怎么讲？没看懂。
红影 发表于 2021-12-10 22:16
现在的小年轻的奉献精神不如老一辈的人。
什么怎么讲？没看懂。
你把我搞晕了啊！
加林森 发表于 2021-12-10 22:56
你把我搞晕了啊！
哈哈，你继续巡逻，俺准备下了{:4_173:}
红影 发表于 2021-12-10 22:58
哈哈，你继续巡逻，俺准备下了
好的好的
加林森 发表于 2021-12-10 20:49
喝起
干
巡逻开始
加林森 发表于 2021-12-11 00:10
巡逻开始
路上可抓抓蟹
队长每天巡逻有没有手拿 一个大脸盆当锣敲起来{:4_170:}
加林森 发表于 2021-12-11 00:10
巡逻开始
队长辛苦{:4_187:}
队长是水区的好管理{:4_199:}
但队长必须注意身体，不能太劳累
水区感谢有队长在{:4_187:}
马黑黑 发表于 2021-12-11 07:58
路上可抓抓蟹
抓黑黑啊