黑书“51荣耀版”

马黑黑 发表于 2022-5-1 10:34

马黑黑 发表于 2022-5-1 10:35

代码：
<style>
.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; }
.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; }
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { display: block; }
.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); } }
.page p { margin: 0; padding: 4px 0; }
h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #000; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #000; font-size: 10px; }
.tit { font: bold 3em / 10em sans-serif; color:#e6e6e6; text-shadow: 1px 1px 2px gray; }
.vtc { writing-mode: vertical-rl; text-align: center; }
.mid { text-align: left; }
.right { text-align: right; }
.red { color: red; }
</style>

<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p class="vtc">五一榮耀版</p>
<p class="tit vtc">黑　書</p>
</div>
<div>
<p class="lnum">Never settle</p>
<p>扉頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>第一頁</p>
</div>
<div>
<p class="lnum">2</p>
<p>第二頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>第三頁</p>
</div>
<div>
<p class="lnum">4</p>
<p>第四頁</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<p>第五頁</p>
</div>
<div>
<p class="lnum">6</p>
<p>第六頁</p>
</div>
</div>
<div class="page">
<div>
<p>第七頁</p>
<p class="rnum">7</p>
</div>
<div>
<p>第八頁</p>
<p class="lnum">8</p>
</div>
</div>
<div class="page">
<div>
<p>Hello CSS</p>
<p class="rnum">内封</p>
</div>
<div>
<p class="rnum">花潮出版社出版<br>五一價￥51.00</p>
</div>
</div>
</div>
<script>
let book = document.querySelector(".book");
let page = document.querySelectorAll(".page");
let idx = 1;
let all = page.length;
let currentPage = 0;

setzIdx();

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

book.onmousemove = function(e){
e = e || event;
let x = e.clientX - this.offsetLeft;
let y = this.clientWidth;
this.style.cursor =`url('https://638183.freep.cn/638183/qd/${x > y/2 ? "pre.cur" : "next.cur"}'), auto`;
idx = x > y/2 ? 1 : -1;
}

function setzIdx(){
if( currentPage < 0 || currentPage > all -1) return false;
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(currentPage <= all - 1) page.style.zIndex = all;
}
</script>

马黑黑 发表于 2022-5-1 10:38

新增主要功能：弹性翻页

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

红影发表于 2022-5-1 11:01

看到了封底的五一价：51元，真会玩{:4_173:}

红影发表于 2022-5-1 11:04

越是改进，越是精美完善，给黑黑点赞{:4_187:}

马黑黑 发表于 2022-5-1 11:19

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

感谢点赞。节日好！

马黑黑 发表于 2022-5-1 11:20

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

这是节日优惠，营销策略

加林森 发表于 2022-5-1 11:52

老黑制作得真美。来学习！{:4_199:}

马黑黑 发表于 2022-5-1 13:08

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

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

梦油发表于 2022-5-1 13:38

黑黑朋友节日快乐！

马黑黑 发表于 2022-5-1 15:22

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

都好都好。谢谢。

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

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

别客气

马黑黑 发表于 2022-5-1 15:27

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

客气一下是应该的

梦油发表于 2022-5-1 15:34

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

谢谢！

马黑黑 发表于 2022-5-1 15:36

翻书的鼠标点击事件：

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

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

加林森 发表于 2022-5-1 17:58

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

嗯嗯，明白的。

马黑黑 发表于 2022-5-1 19:46

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

嗯嗯，谢谢理解

加林森 发表于 2022-5-1 19:50

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

老黑真好！{:4_191:}

红影发表于 2022-5-2 09:27

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

客气了。黑黑节日快乐{:4_187:}

马黑黑 发表于 2022-5-2 09:27

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

都乐都乐

页: [1] 2

花潮论坛's Archiver

黑书“51荣耀版”