《平湖秋月》-- 付娜
本帖最后由 加林森 于 2022-5-1 19:52 编辑 <br /><br /><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;
}
currentPage += idx;
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=1470348384&auto=1&height=66"></iframe><br><br><br>
@马黑黑 加加你可以将图片裁成同一规格。。。{:4_190:} 东篱闲人 发表于 2022-5-1 19:10
加加你可以将图片裁成同一规格。。。
嗯嗯，谢谢老兄！我没有控制好.{:5_102:} 加林森 发表于 2022-5-1 19:36
嗯嗯，谢谢老兄！我没有控制好.
嗯嗯，这样显得有点乱。。。{:5_117:} 都不对劲呢，队长 东篱闲人 发表于 2022-5-1 19:41
嗯嗯，这样显得有点乱。。。
就是就是。 马黑黑 发表于 2022-5-1 19:45
都不对劲呢，队长
是啊，我也感觉错得离谱了。 加林森 发表于 2022-5-1 19:47
是啊，我也感觉错得离谱了。
找找原因 马黑黑 发表于 2022-5-1 19:51
找找原因
嗯嗯，谢谢老黑！ 加林森 发表于 2022-5-1 19:55
嗯嗯，谢谢老黑！
总要解决问题的 不能往回翻了？也无法评分呢。 不能评分了啊 马黑黑 发表于 2022-5-1 20:04
总要解决问题的
好的好的 红影 发表于 2022-5-1 21:12
不能往回翻了？也无法评分呢。
我得多看看问题出在哪里了。 绿叶清舟 发表于 2022-5-1 21:15
不能评分了啊
好像问题比较大了。 马黑黑 发表于 2022-5-1 20:04
总要解决问题的
嗯嗯。{:4_191:} 假期有这么好的美妙音乐供俺欣赏真是好惬意啊！谢谢加林森朋友。 梦油 发表于 2022-5-2 09:22
假期有这么好的美妙音乐供俺欣赏真是好惬意啊！谢谢加林森朋友。
好的好的。 加林森 发表于 2022-5-2 12:00
好的好的。
下午经常欣赏到你的好作品。
页:
[1]
2