论坛 › 欢乐水吧 › 学习黑黑翻页效果TO：老头520快乐

小辣椒 发表于 2022-5-20 13:43

学习黑黑翻页效果TO：老头520快乐

<style>
.book {
      left: -460px;
      TOP: 150px;
      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://wj.zp68.com/lxx/yunhua/2022/05/20/fm.jpg" alt="" /></div>
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/01.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/02.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/2.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/3.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/4.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/5.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/6.jpg" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/7.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/8.jpg" alt="" /></div>
      </div>

      <div class="page">
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/9.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/10.jpg" alt="" /></div>
      </div>

      <div class="page">
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/11.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/12.jpg" alt="" /></div>
      </div>
       <div class="page">
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/13.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/14.jpg" alt="" /></div>
      </div>
      <div class="page">
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/15.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/16.jpg" alt="" /></div>
      </div>
      <div class="page">
               <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/17.jpg" alt="" /></div>
                <div><img src="https://wj.zp68.com/lxx/yunhua/2022/05/20/fd.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=0; j<all; j++){
                page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
      }
      if(page.style.zIndex <= all) page.style.zIndex = all;
}
</script>

<audio style="width:0px;height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="https://wj.zp68.com/lxx/yunhua/20211221/01.mp3" type="audio/mpeg"></audio><br></div><br><br><br><br><br><br><br><br><br><br>

小辣椒 发表于 2022-5-20 13:45

@东篱闲人 老头套用了你的翻页代码，感觉这个和电子相册还是有区别的，图图我不能整个页面出来中间有一条分割线，我拉了渐变还是看得出，最后我就直接裁剪就这样了，别说我破坏了你的音画啊

小辣椒 发表于 2022-5-20 13:50

@马黑黑 黑黑，这个翻页效果不知道我错在哪里，正面翻页顺序是对的，回过来翻页后面几页会跳页，我就看见<all; j++)和<currentPage;j++) ，就直接加图片了，问了度娘还是没有搞懂

小辣椒 发表于 2022-5-20 13:51

老头这么多人喜欢你 520快乐{:4_172:}

顾-念 发表于 2022-5-20 13:58

都出书了，好看。今天快乐

小辣椒 发表于 2022-5-20 13:58

顾-念 发表于 2022-5-20 13:58
都出书了，好看。今天快乐

暖男是手机吗？

顾-念 发表于 2022-5-20 13:59

小辣椒 发表于 2022-5-20 13:58
暖男是手机吗？

对啊，手机

小辣椒 发表于 2022-5-20 14:02

顾-念 发表于 2022-5-20 13:59
对啊，手机

哦，那就好，手机可以欣赏{:4_173:}

顾-念 发表于 2022-5-20 14:03

小辣椒 发表于 2022-5-20 14:02
哦，那就好，手机可以欣赏

哈哈，用手机可以躺沙发

红影 发表于 2022-5-20 14:04

这个太不容易了，要去搜集那么多素材，还要制作。亲爱的做得真美，太棒了{:4_199:}

小辣椒 发表于 2022-5-20 14:08

红影 发表于 2022-5-20 14:04
这个太不容易了，要去搜集那么多素材，还要制作。亲爱的做得真美，太棒了

这个素材是非常快的，就为翻页反过来的时候最后几页会跳页，我捣鼓了很多时间的，最后自己没有找出原因，就直接发了，请教黑黑了

小辣椒 发表于 2022-5-20 14:09

顾-念 发表于 2022-5-20 14:03
哈哈，用手机可以躺沙发

是啊，我也是经常就手机看看

顾-念 发表于 2022-5-20 14:15

小辣椒 发表于 2022-5-20 14:09
是啊，我也是经常就手机看看

用手机躺着看，颈椎不累。我去歇会，你也休息会吧。

小辣椒 发表于 2022-5-20 14:18

顾-念 发表于 2022-5-20 14:15
用手机躺着看，颈椎不累。我去歇会，你也休息会吧。

谢谢暖男，我已经换手机了{:4_173:}

梦油 发表于 2022-5-20 14:21

小辣椒的制作真神了。东篱闲人的演唱音色很美，

加林森 发表于 2022-5-20 15:19

本帖最后由 加林森 于 2022-5-20 15:27 编辑

小辣椒制作得真漂亮！老兄收礼开森！{:4_199:}

东篱闲人 发表于 2022-5-20 15:48

小辣椒 发表于 2022-5-20 13:45
@东篱闲人 老头套用了你的翻页代码，感觉这个和电子相册还是有区别的，图图我不能整个页面出来中间有一条分 ...

可以找个渐变图片做叠加。。。{:5_117:}

东篱闲人 发表于 2022-5-20 15:49

师傅真帅，做的真漂亮！{:4_187:}

小辣椒 发表于 2022-5-20 15:49

梦油 发表于 2022-5-20 14:21
小辣椒的制作真神了。东篱闲人的演唱音色很美，

谢谢梦油欣赏，老头有翻唱专辑在翻唱版，你可以去欣赏的，老头多才多艺的{:4_187:}

东篱闲人 发表于 2022-5-20 15:49

520是啥意思？为什么要快乐？{:5_115:}

查看完整版本: 学习黑黑翻页效果TO：老头520快乐