黑书“51荣耀版”

马黑黑

All in here

五一榮耀版

黑　書

Never settle

扉頁

1

第一頁

2

第二頁

3

第三頁

4

第四頁

5

第五頁

6

第六頁

第七頁

7

第八頁

8

Hello CSS

内封

花潮出版社出版
五一價 ￥51.00

马黑黑

代码：

1. <style>
   
2.         .book { margin: auto; margin-top: 50px; display: flex; align-items: center; font: normal 1em sans-serif; width: 1024px; height: 700px; perspective: 2000px; cursor: pointer; padding: 10px; position: relative; }
   
3.         .page { padding: 20px; width: 478px; height: 670px; left: 50%; transform-origin: left; background-color: rgba(243,226,199,1); background: linear-gradient(to right, rgba(193,158,103,1) 0%, rgba(182,141,76,1) 1%, rgba(233,212,179,1) 100%); box-shadow: inset -3px -3px 6px rgba(243,226,199,1), 1px 1px 20px rgba(0,0,0,.15); transform-style: preserve-3d; position: absolute; }
   
4.         .page div { width: 100%; height: 100%; }
   
5.         .page div:nth-child(1) { display: block; }
   
6.         .page div:nth-child(2) { display: none; }
   
7.         @keyframes rot1{ from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
   
8.         @keyframes rot2{ from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
   
9.         .page p { margin: 0; padding: 4px 0; }
   
10.         h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
    
11.         .rnum { position: absolute; bottom: 4px; right: 10px; color: #000; font-size: 10px; }
    
12.         .lnum { position: absolute; bottom: -16px; left: -6px; color: #000; font-size: 10px; }
    
13.         .tit { font: bold 3em / 10em sans-serif; color:#e6e6e6; text-shadow: 1px 1px 2px gray; }
    
14.         .vtc { writing-mode: vertical-rl; text-align: center; }
    
15.         .mid { text-align: left; }
    
16.         .right { text-align: right; }
    
17.         .red { color: red; }
    
18. </style>
    
19. 
    
20. <div class="book">
    
21.         <div class="page">
    
22.                 <div>
    
23.                         <p class="rnum">All in here</p>
    
24.                         <p class="vtc">五一榮耀版</p>
    
25.                         <p class="tit vtc">黑　書</p>
    
26.                 </div>
    
27.                 <div>
    
28.                         <p class="lnum">Never settle</p>
    
29.                         <p>扉頁</p>
    
30.                 </div>
    
31.         </div>
    
32.         <div class="page">
    
33.                 <div>
    
34.                         <p class="rnum">1</p>
    
35.                         <p>第一頁</p>
    
36.                 </div>
    
37.                 <div>
    
38.                         <p class="lnum">2</p>
    
39.                         <p>第二頁</p>
    
40.                 </div>
    
41.         </div>
    
42.         <div class="page">
    
43.                 <div>
    
44.                         <p class="rnum">3</p>
    
45.                         <p>第三頁</p>
    
46.                 </div>
    
47.                 <div>
    
48.                         <p class="lnum">4</p>
    
49.                         <p>第四頁</p>
    
50.                 </div>
    
51.         </div>
    
52.         <div class="page">
    
53.                 <div>
    
54.                         <p class="rnum">5</p>
    
55.                         <p>第五頁</p>
    
56.                 </div>
    
57.                 <div>
    
58.                         <p class="lnum">6</p>
    
59.                         <p>第六頁</p>
    
60.                 </div>
    
61.         </div>
    
62.         <div class="page">
    
63.                 <div>
    
64.                         <p>第七頁</p>
    
65.                         <p class="rnum">7</p>
    
66.                 </div>
    
67.                 <div>
    
68.                         <p>第八頁</p>
    
69.                         <p class="lnum">8</p>
    
70.                 </div>
    
71.         </div>
    
72.         <div class="page">
    
73.                 <div>
    
74.                         <p>Hello CSS</p>
    
75.                         <p class="rnum">内封</p>
    
76.                 </div>
    
77.                 <div>
    
78.                         <p class="rnum">花潮出版社出版<br>五一價 ￥51.00</p>
    
79.                         </div>
    
80.         </div>
    
81. </div>
    
82. <script>
    
83. let book = document.querySelector(".book");
    
84. let page = document.querySelectorAll(".page");
    
85. let idx = 1;
    
86. let all = page.length;
    
87. let currentPage = 0;
    
88. 
    
89. setzIdx();
    
90. 
    
91. book.onclick = function(){
    
92.         if(idx == 1) { //左翻
    
93.                 if(currentPage == all) return false; //封底边界限制
    
94.                 if(currentPage != all){
    
95.                         page[currentPage].style.animation = "rot1 .5s linear forwards";
    
96.                         page[currentPage].children[0].style.display = "none";
    
97.                         page[currentPage].children[1].style.display = "block";
    
98.                         page[currentPage].children[1].style.transform = "rotateY(-180deg)";
    
99.                 }
    
100.         } else { //右翻
     
101.                 if(currentPage == 0) return false; //封面边界限制
     
102.                 if(currentPage > 0) {
     
103.                         page[currentPage-1].style.animation = "rot2 .5s linear forwards";
     
104.                         page[currentPage-1].children[1].style.display = "none";
     
105.                         page[currentPage-1].children[0].style.display = "block";
     
106.                         page[currentPage-1].children[1].style.transform = "rotateY(0deg)";
     
107.                 }
     
108.         }
     
109.         if(currentPage < 0) currentPage = 0;
     
110.         if(currentPage >= all) currentPage = all;
     
111.         currentPage += idx;
     
112.         setzIdx();
     
113. }
     
114. 
     
115. book.onmousemove = function(e){
     
116.         e = e || event;
     
117.         let x = e.clientX - this.offsetLeft;
     
118.         let y = this.clientWidth;
     
119.         this.style.cursor =  `url('https://638183.freep.cn/638183/qd/${x > y/2 ? "pre.cur" : "next.cur"}'), auto`;
     
120.         idx = x > y/2 ? 1 : -1;
     
121. }
     
122. 
     
123. function setzIdx(){
     
124.         if( currentPage < 0 || currentPage > all -1) return false;
     
125.         for(j=0; j<all; j++){
     
126.                 page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
     
127.         }
     
128.         if(currentPage <= all - 1) page[currentPage].style.zIndex = all;
     
129. }
     
130. </script>

复制代码

马黑黑

新增主要功能：弹性翻页

所谓弹性翻页，指翻页过程中，可以在相邻纸页之间来回切换。

红影

看到了封底的五一价：51元，真会玩

红影

越是改进，越是精美完善，给黑黑点赞

马黑黑

红影 发表于 2022-5-1 11:04
越是改进，越是精美完善，给黑黑点赞

感谢点赞。节日好！

马黑黑

红影 发表于 2022-5-1 11:01
看到了封底的五一价：51元，真会玩

这是节日优惠，营销策略

加林森

老黑制作得真美。来学习！

马黑黑

加林森 发表于 2022-5-1 11:52
老黑制作得真美。来学习！

还没做多少修饰，主要还是关注功能层面

梦油

黑黑朋友节日快乐！

马黑黑

梦油 发表于 2022-5-1 13:38
黑黑朋友节日快乐！

都好都好。谢谢。

梦油

马黑黑 发表于 2022-5-1 15:22
都好都好。谢谢。

别客气

马黑黑

梦油 发表于 2022-5-1 15:26
别客气

客气一下是应该的

梦油

马黑黑 发表于 2022-5-1 15:27
客气一下是应该的

谢谢！

马黑黑

翻书的鼠标点击事件：

book.onclick = function(){
        if(idx == 1) { //左翻
                if(currentPage == all) return false; //封底边界限制
                if(currentPage != all){
                        page[currentPage].style.animation = "rot1 .5s linear forwards";
                        page[currentPage].children[0].style.display = "none";
                        page[currentPage].children[1].style.display = "block";
                        page[currentPage].children[1].style.transform = "rotateY(-180deg)";
                }
        } else { //右翻
                if(currentPage == 0) return false; //封面边界限制
                if(currentPage > 0) {
                        page[currentPage-1].style.animation = "rot2 .5s linear forwards";
                        page[currentPage-1].children[1].style.display = "none";
                        page[currentPage-1].children[0].style.display = "block";
                        page[currentPage-1].children[1].style.transform = "rotateY(0deg)";
                }
        }
        if(currentPage < 0) currentPage = 0;
        if(currentPage >= all) currentPage = all;
        currentPage += idx;
        setzIdx();
}

红色这句道理上应上提两行，有它的变化才有页面的边界处理。但在这里并不影响执行，因为还有其他针对页码边界的处理机制，包括上述代码。这句的位置，应与测试时调整另一句console.log语句有关，鼠标一滑，按control+shift+方向键，测试结束删掉那句，却忘了把红色这句调整回原来的位置。

加林森

马黑黑 发表于 2022-5-1 13:08
还没做多少修饰，主要还是关注功能层面

嗯嗯，明白的。

马黑黑

加林森 发表于 2022-5-1 17:58
嗯嗯，明白的。

嗯嗯，谢谢理解

加林森

马黑黑 发表于 2022-5-1 19:46
嗯嗯，谢谢理解

老黑真好！

红影

马黑黑 发表于 2022-5-1 11:19
感谢点赞。节日好！

客气了。黑黑节日快乐

马黑黑

红影 发表于 2022-5-2 09:27
客气了。黑黑节日快乐

都乐都乐