芍药词
本帖最后由 东篱闲人 于 2022-5-21 19:05 编辑 <br /><br /><style>.book {
left: -500px;
display: flex;
align-items: center;
width: 1600px;
height: 791px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 642px;
height: 791px;
left: 50%;
border-left: 0px 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/21/OjTgxg.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/Oj7PzD.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/21/Oj7pi6.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/Oj73Lj.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/21/Oj7ALd.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/OjHsgS.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/21/OjbCKe.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/OjL2HH.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/21/OjLZjS.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/OjbnxS.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://s1.ax1x.com/2022/05/21/OjbQbj.jpg" alt="" /></div>
<div><img src="https://s1.ax1x.com/2022/05/21/OjTHRU.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=246119&auto=1&height=66"></iframe><br><br><br>
老兄又玩翻页啦。制作很漂亮，给力！{:4_199:} 美哉芍药 定价没看清楚，我的放大镜放厨房里了 加林森 发表于 2022-5-21 19:16
老兄又玩翻页啦。制作很漂亮，给力！
嗯嗯，瞎玩呗。。。{:5_117:} 马黑黑 发表于 2022-5-21 19:28
定价没看清楚，我的放大镜放厨房里了
看清楚就没法涨价了。。。{:5_117:} 东篱闲人 发表于 2022-5-21 19:34
嗯嗯，瞎玩呗。。。
玩得很高雅的。。。。{:4_199:} 东篱闲人 发表于 2022-5-21 19:35
看清楚就没法涨价了。。。
也是，这是经营策略 加林森 发表于 2022-5-21 19:37
玩得很高雅的。。。。
高雅啥啊？就是闲的。。。{:5_106:} 马黑黑 发表于 2022-5-21 19:42
也是，这是经营策略
嗯嗯嗯。。。{:5_117:} 每一页都是精心设计，这个诗集真美。欣赏东篱大哥好帖{:4_187:} 红影 发表于 2022-5-21 19:45
每一页都是精心设计，这个诗集真美。欣赏东篱大哥好帖
喝水。。。。{:4_176:} 东篱闲人 发表于 2022-5-21 19:43
嗯嗯嗯。。。
教授真会营销 哈哈，你来真有心了，俺的破字还上诗集了。{:4_189:} 谢谢你老，辛苦了，制作得真漂亮，收藏。{:4_199:}{:4_199:} 马黑黑 发表于 2022-5-21 20:06
教授真会营销
教授是加加。。。{:5_116:} 红芍药 发表于 2022-5-21 20:14
哈哈，你来真有心了，俺的破字还上诗集了。
你本来就是诗人。。。{:5_116:} 东篱闲人 发表于 2022-5-21 20:17
你本来就是诗人。。。
俺还诗人？不过灰稀饭介诗集。。{:4_189:} 红芍药 发表于 2022-5-21 20:21
俺还诗人？不过灰稀饭介诗集。。
喜欢，那俺就放心了。。。{:5_117:} 东篱闲人 发表于 2022-5-21 20:22
喜欢，那俺就放心了。。。
你的手艺真好，羡慕啥都能整。让俺看看你的手。。。{:4_189:}