何故不翻书

马黑黑

基本功能有所改进：

① 可以加页了；
② 可以真正翻页了；
③ 翻页后倒转镜像的现象处理了；
④ 书页子元素的z-index问题弄好了……

诸多的算法，尽在JS里，代码的复杂度比想象的不那么吓人：

何故不翻书 (animpen.com)

马黑黑

代码：

1. <style>
   
2. .book {
   
3.         margin: auto;
   
4.         display: flex;
   
5.         align-items: center;
   
6.         width: 1024px;
   
7.         height: 600px;
   
8.         perspective: 1000px;
   
9.         cursor: pointer;
   
10.         padding: 10px;
    
11.         position: relative;
    
12.         background: rgba(0,0,0,.8);
    
13. }
    
14. .page {
    
15.         background: #ccc;
    
16.         padding: 20px;
    
17.         width: 310px;
    
18.         height: 400px;
    
19.         left: 50%;
    
20.         border-left: 1px solid #dcdcdc ;
    
21.         transform-origin: left;
    
22.         box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
    
23.         transform-style: preserve-3d;
    
24.         position: absolute;
    
25. }
    
26. .page span { display: block; }
    
27. @keyframes rot1{
    
28.         from { transform: rotateY(0deg); }
    
29.         to { transform: rotateY(-180deg); }
    
30. }
    
31. @keyframes rot2{
    
32.         from { transform: rotateY(-180deg); }
    
33.         to { transform: rotateY(0deg); }
    
34. }
    
35. </style>
    
36. 
    
37. <div class="book">
    
38.         <div class="page"><span>1</span></div>
    
39.         <div class="page"><span>2</span></div>
    
40.         <div class="page"><span>3</span></div>
    
41.         <div class="page"><span>4</span></div>
    
42. </div>
    
43. 
    
44. <script>
    
45. 
    
46. let page = document.querySelectorAll(".page");
    
47. let idx = 0;
    
48. let all = page.length;
    
49. let currentPage = 0;
    
50. 
    
51. setzIdx();
    
52. 
    
53. document.querySelector(".book").onclick = function(){
    
54.         if(idx == 0){ //前翻
    
55.                 page[currentPage].style.animation = "rot1 .5s linear forwards";
    
56.                 page[currentPage].children[0].style.transform = "rotateY(-180deg)";
    
57.                 currentPage ++;
    
58.                 if(currentPage == all){
    
59.                         idx = 1;
    
60.                         currentPage = all - 1;
    
61.                 }
    
62.                 setzIdx();
    
63.         } else { //后翻
    
64.                 page[currentPage].style.animation = "rot2 .5s linear forwards";
    
65.                 page[currentPage].children[0].style.transform = "rotateY(0deg)";
    
66.                 currentPage --;
    
67.                 if(currentPage < 0){
    
68.                         idx = 0;
    
69.                         currentPage = 0;
    
70.                 }
    
71.                 setzIdx();
    
72.         }
    
73. }
    
74. 
    
75. function setzIdx(){
    
76.         for(j=currentPage; j<all; j++){
    
77.                 page[j].style.zIndex = all - j;
    
78.         }
    
79.         for(j=0; j<currentPage;j++) {
    
80.                 page[j].style.zIndex = j + 1;
    
81.         }
    
82.         if(currentPage == all - 1) page[currentPage].style.zIndex = all;
    
83. }
    
84. 
    
85. </script>

复制代码

马黑黑

1

2

3

4

马黑黑

当前翻书代码的一些说明：

一、CSS

①.book 类选择器作为翻书的场所，尺寸变得更大，背景色也变了。它还以弹性布局的方式令一级子元素及书页垂直居中；

②.page 类选择器，即书页样式，略作加工，主要是令其有一些阴影；

③添加了 span 元素选择器，隶属于 .page，作为 .page 当前演示所用的第一级子元素，用以装载文本，稍后在JS里通过对它的翻转令文本正位。

其他细节修饰尚未操作。

二、HTML

现在主体结构是三层，外层是书的展示场景，第二层是书页，每个书页各带一个子层，也就是第三层 span（将来可能或可以会考虑换成其他的）。

三、JS

JS依然保持简洁，但完善了一些功能：

① 新增过程公用两个变量：all 用于获取 .page 即书页的总量，便于翻页边界操作；currentPage 是当前页，具体指当前接收翻页操作的页序号，它是确定翻页的接收对象、翻页边界判断等的依据；

② 增设一个自定义函数 setzIdx，意为 set z-index，即设置书页的层秩序，相当于洗牌。这个函数一开始就会被调用，让书页按预设的顺序摆放。每一次的翻页动作，都要调用一次该函数，重新洗牌。该函数的洗牌依据之一是 currentPage，当前页肯定得到一个相对大的 z-index 值，其余依次减小此值。函数用了两此 for 语句，分别针对当前页往前、往后进行对书页“洗牌”；

③ 书本单击事件重新改写，依然依据变量 idx 判断前翻/后翻，并做相应的“洗牌”、边界判断处理等工作。和重置书页 z-index 秩序一样，这里也体现着算法的精妙。

此翻页版本，基本功能业已实现，它能用了。细节方面可根据用途修改完善。

红影

原来这里也有，看到一楼就直接跑去那边了

红影

试了一下，可以随便加了。这个竟然不需要设置z向了啊，现在想加多少就加多少了。黑黑厉害

加林森

好漂亮的制作，老黑你真好！

马黑黑

加林森 发表于 2022-4-27 10:53
好漂亮的制作，老黑你真好！

一般般一般般，班里倒数第三

马黑黑

红影 发表于 2022-4-27 09:09
原来这里也有，看到一楼就直接跑去那边了

这里早上放上去的

马黑黑

红影 发表于 2022-4-27 09:13
试了一下，可以随便加了。这个竟然不需要设置z向了啊，现在想加多少就加多少了。黑黑厉害

Z轴是否使用还要看情况吧，也不是现在关注的事情。功能完善才是首要任务。作为书籍模拟，大致的功能要先能实现，比如翻页我们是弄好了，可是，打开封面，进去的是扉页和第一页，然后再翻，依次是第二、三页，后面呢，是最后一页和内封，然后是封底，这些情节要考虑进去，不是给个页码那么简单。作为演示，我们先到这一步，这就是本帖能实现的项目。

加林森

马黑黑 发表于 2022-4-27 12:53
一般般一般般，班里倒数第三

又来了。。。

马黑黑

加林森 发表于 2022-4-27 13:28
又来了。。。

名人名言

加林森

马黑黑 发表于 2022-4-27 19:30
名人名言

好的好的，你说了算。

红影

马黑黑 发表于 2022-4-27 12:56
这里早上放上去的

那里去传代码的都是大咖啊。

红影

马黑黑 发表于 2022-4-27 13:01
Z轴是否使用还要看情况吧，也不是现在关注的事情。功能完善才是首要任务。作为书籍模拟，大致的功能要先 ...

黑黑说的，是按照常规的书本的排布习惯，考虑得很周全呢

马黑黑

红影 发表于 2022-4-27 21:15
黑黑说的，是按照常规的书本的排布习惯，考虑得很周全呢

这个好像是必须的吧

马黑黑

红影 发表于 2022-4-27 21:14
那里去传代码的都是大咖啊。

可以不是的

红影

马黑黑 发表于 2022-4-27 22:19
这个好像是必须的吧

在黑黑这里，万物皆可模拟

红影

马黑黑 发表于 2022-4-27 22:19
可以不是的

没两把刷子谁敢去啊

马黑黑

红影 发表于 2022-4-28 10:18
没两把刷子谁敢去啊

那里就是用来测试和保留代码的