论坛 › 欢乐水吧 › 学习笔记 TO东篱闲人（学习翻页代码）

红影 发表于 2022-4-29 15:10

学习笔记 TO东篱闲人（学习翻页代码）

<style>
.book {
      left: -10px;
      top:30px;
      display: flex;
      align-items: center;
      width: 740px;
      height: 500px;
      perspective: 2000px;
      cursor: pointer;
      padding: 10px;
      position: relative;
        background: url('https://pic.imgdb.cn/item/626b794b239250f7c574135a.jpg') no-repeat center/cover;
      box-shadow: 4px 4px 5px #888;border-radius:12px;
}

.page {

      padding: 0px;
      width: 337px;
      height: 503px;
      left: 50%;
      top:10px;

      transform-origin: left;

      transform-style: preserve-3d;
      position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
.page img { width: 100%; height: 100%; }
@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/626b7969239250f7c5745206.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/626b815b239250f7c5840a1d.gif" alt="" /></div>
      </div>
      <div class="page">
                <div><img src="https://pic.imgdb.cn/item/626b7f9d239250f7c5807c71.jpg" alt="" /></div>
                <div><img src="https://pic.imgdb.cn/item/626b8324239250f7c587a638.jpg" alt="" /></div>
      </div>

</div><br><br><br><br>

<script>
let wyy = document.createElement('iframe');
wyy.src = 'https://music.163.com/outchain/player?type=2&id=1469231143&auto=1&height=66';
wyy.style.display = 'none';
document.querySelector('.book').appendChild(wyy);


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>

红影 发表于 2022-4-29 15:11

和东篱大哥一起学习和温习定位代码{:4_173:}

红影 发表于 2022-4-29 15:12

真好刚做了这个，看到东篱大哥的礼物，就用这个凑数也回礼一个。
和东篱大哥一起想到了线圈活页夹的内页，这算不算心有灵犀{:4_173:}

红影 发表于 2022-4-29 15:13

这个没弄封面和封底，纯纯的学习内页记录，边学做代码帖子边复习定位知识{:4_173:}

梦油 发表于 2022-4-29 16:25

红影朋友下午好！你真聪明，接受能力也很强，学了就会。

马黑黑 发表于 2022-4-29 17:30

腻害腻害，做的和东篱的一样漂酿

东篱闲人 发表于 2022-4-29 17:46

红影 发表于 2022-4-29 15:12
真好刚做了这个，看到东篱大哥的礼物，就用这个凑数也回礼一个。
和东篱大哥一起想到了线圈活页夹的内页， ...

绝对是心有灵犀。。。{:4_170:}

东篱闲人 发表于 2022-4-29 17:47

红影 发表于 2022-4-29 15:11
和东篱大哥一起学习和温习定位代码

共同学知识。。。{:5_117:}

加林森 发表于 2022-4-29 17:52

真漂亮，红影的制作太有意思了。{:4_199:}

来看你 发表于 2022-4-29 22:16

看到好几个版本的书了，都是赏心悦目
赞叹不已 {:4_199:}

红影 发表于 2022-4-29 23:04

梦油 发表于 2022-4-29 16:25
红影朋友下午好！你真聪明，接受能力也很强，学了就会。

谁学了都会的呀，只是借用了黑黑的代码呢{:4_173:}

红影 发表于 2022-4-29 23:04

马黑黑 发表于 2022-4-29 17:30
腻害腻害，做的和东篱的一样漂酿

没做封面什么的，总觉得这样摊开的挺好，否则少一半也难受{:4_173:}

红影 发表于 2022-4-29 23:05

东篱闲人 发表于 2022-4-29 17:46
绝对是心有灵犀。。。

都想到了这样的形式，看到东篱大哥那个帖子的时候笑，我也正好弄了这样的样式{:4_173:}

红影 发表于 2022-4-29 23:06

东篱闲人 发表于 2022-4-29 17:47
共同学知识。。。

嗯，边做的时候我也边复习了一边呢{:4_173:}

红影 发表于 2022-4-29 23:07

加林森 发表于 2022-4-29 17:52
真漂亮，红影的制作太有意思了。

正好用这个做翻页笔记了，可以把黑黑的定位的代码又复习一遍{:4_173:}

红影 发表于 2022-4-29 23:08

来看你 发表于 2022-4-29 22:16
看到好几个版本的书了，都是赏心悦目
赞叹不已

我这个不是书呢，是笔记本的内页。东篱大哥那个才是书{:4_173:}

加林森 发表于 2022-4-29 23:08

红影 发表于 2022-4-29 23:07
正好用这个做翻页笔记了，可以把黑黑的定位的代码又复习一遍

挺好的，这个方式我以后也要用起来。{:4_204:}

马黑黑 发表于 2022-4-30 08:37

红影 发表于 2022-4-29 23:04
没做封面什么的，总觉得这样摊开的挺好，否则少一半也难受

我去看了几个原生JS做的翻书程序，他们也是这么摊着的，都回避翻到封面和封底，因为这个边界最难处理——尤其是有弹性回翻的时候（现在的黑书还没有弹性回翻）。

梦油 发表于 2022-4-30 10:44

红影 发表于 2022-4-29 23:04
谁学了都会的呀，只是借用了黑黑的代码呢

欢迎朋友节日好！
难者不会会者不难啊！

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

红影 发表于 2022-4-29 23:05
都想到了这样的形式，看到东篱大哥那个帖子的时候笑，我也正好弄了这样的样式

嗯嗯，不然中间的分隔太不明显。。。

查看完整版本: 学习笔记 TO东篱闲人（学习翻页代码）