东篱闲人 发表于 2022-4-28 18:31

【翻页练习】鹧鸪天

本帖最后由 东篱闲人 于 2022-4-30 13:11 编辑 <br /><br /><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; }
@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/30/Lz75yq.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://s1.ax1x.com/2022/04/30/Lz7qkF.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>

<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>

加林森 发表于 2022-4-28 18:57

老兄制作得真漂亮，为你点赞！{:4_199:}

红影 发表于 2022-4-28 20:31

这个好像一翻页就会有一张图片被点中，没法连续翻页呢。
制作好美，词和画都很美，这么多好词，东篱大哥厉害{:4_187:}

樵歌 发表于 2022-4-28 20:32

精美两不足以评价其成就！{:4_199:}

红影 发表于 2022-4-28 20:32

封面和封底都做得那么漂亮，东篱大哥的诗词集{:4_187:}

东篱闲人 发表于 2022-4-28 21:59

加林森 发表于 2022-4-28 18:57
老兄制作得真漂亮，为你点赞！

谢谢加加，喝水。。。。{:4_176:}

东篱闲人 发表于 2022-4-28 22:00

红影 发表于 2022-4-28 20:31
这个好像一翻页就会有一张图片被点中，没法连续翻页呢。
制作好美，词和画都很美，这么多好词，东篱大哥厉 ...

是有点不对劲，在俺那里测试的挺好的，发这里就出问题了。。。{:5_103:}

东篱闲人 发表于 2022-4-28 22:01

樵歌 发表于 2022-4-28 20:32
精美两不足以评价其成就！

老樵唠嗑越来越有水平了。。。{:5_117:}

加林森 发表于 2022-4-28 22:04

东篱闲人 发表于 2022-4-28 21:59
谢谢加加，喝水。。。。

好的好的，喝吧：{:4_176:}

东篱闲人 发表于 2022-4-28 22:06

加林森 发表于 2022-4-28 22:04
好的好的，喝吧：

多喝点，睡的香。。。{:5_117:}

樵歌 发表于 2022-4-29 07:08

东篱闲人 发表于 2022-4-28 22:01
老樵唠嗑越来越有水平了。。。

不会唠，瞎唠{:4_189:}

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

樵歌 发表于 2022-4-29 07:08
不会唠，瞎唠

哈，这个也学？{:5_117:}

红影 发表于 2022-4-29 22:47

东篱闲人 发表于 2022-4-28 22:00
是有点不对劲，在俺那里测试的挺好的，发这里就出问题了。。。

嗯，有时本地测试和发到论坛不一样呢。

东篱闲人 发表于 2022-4-30 12:56

红影 发表于 2022-4-29 22:47
嗯，有时本地测试和发到论坛不一样呢。

这个论坛有毛病。。。{:5_117:}

红影 发表于 2022-4-30 22:43

东篱闲人 发表于 2022-4-30 12:56
这个论坛有毛病。。。

不是呢，是构成论坛的语句有时和我们玩的语句有冲突。

东篱闲人 发表于 2022-5-1 14:59

红影 发表于 2022-4-30 22:43
不是呢，是构成论坛的语句有时和我们玩的语句有冲突。

冲突就揍他。。。{:4_170:}
页: [1]
查看完整版本: 【翻页练习】鹧鸪天