小黑书v3（六一特别版）

马黑黑

花潮出品

书名

bb3

扉页

1

第一页内容

2

第二页内容

3

第三页内容

4

第四页内容

5

第五页内容

6

第六页内容

内封

内封

花潮出版社2022

封底

马黑黑

1. <style>
   
2. .book {/* 容器 */
   
3.         left: -214px; margin-top: 50px; display: flex; align-items: center;
   
4.         font: normal 1em sans-serif; width: 1024px; height: 600px;
   
5.         perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
   
6. }
   
7. .page {/* 纸张 高度小于父元素30px*/
   
8.         padding: 20px;width: 478px; height: 570px; left: 50%; transform-origin: left;
   
9.         background: lightseagreen linear-gradient(rgba(255,255,255, .95), rgba(255,255,255, .75));
   
10.         box-shadow: inset -3px -3px 6px rgba(255,255,255,.5), 2px 10px 60px rgba(0,0,0,.15);
    
11.         transform-style: preserve-3d; position: absolute;
    
12. }
    
13. .page div { width: 100%; height: 100%; }/* 书页 */
    
14. .page div:nth-child(1) { display: block; }/* 单数页 */
    
15. .page div:nth-child(2) { display: none; }/* 双数页 */
    
16. .page div img { width: 100%;} /* img标签：限制宽度 */
    
17. @keyframes rot1{ from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }/* 左翻动画 */
    
18. @keyframes rot2{ from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }/* 右翻动画 */
    
19. .page p { margin: 0; padding: 4px 0; }/* 各页p标签 */
    
20. .page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
    
21. .cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
    
22. .rnum { position: absolute; bottom: 6px; right: 12px; color: #000; font-size: 10px; }/*右页码*/
    
23. .lnum { position: absolute; bottom: -14px; left: -4px; color: #000; font-size: 10px; }/*左页码*/
    
24. .tit { font: bold 3em / 6em sans-serif; color:olive; text-shadow: 1px 1px 2px gray; letter-spacing: 20px; }/* 书名 */
    
25. .mid { text-align: center; }/* 居中对齐 */
    
26. .right { text-align: right; }/* 右对齐 */
    
27. .red { color: red; }/* 红色文本 */
    
28. </style>
    
29. 
    
30. <div class="book">
    
31.         <div class="page cover">
    
32.                 <div><!-- 封面 -->
    
33.                         <p class="rnum">花潮出品</p>
    
34.                         <p class="tit mid">书名</p>
    
35.                 </div>
    
36.                 <div><!-- 扉页 -->
    
37.                         <p class="lnum">bb3</p>
    
38.                         <h2>扉页</h2>
    
39.                 </div>
    
40.         </div>
    
41.         <div class="page">
    
42.                 <div>
    
43.                         <p class="rnum">1</p>
    
44.                         <p>第一页内容</p>
    
45.                 </div>
    
46.                 <div>
    
47.                         <p class="lnum">2</p>
    
48.                         <p>第二页内容</p>
    
49.                 </div>
    
50.         </div>
    
51.         <div class="page">
    
52.                 <div>
    
53.                         <p class="rnum">3</p>
    
54.                         <p>第三页内容</p>
    
55.                 </div>
    
56.                 <div>
    
57.                         <p class="lnum">4</p>
    
58.                         <p>第四页内容</p>
    
59.                 </div>
    
60.         </div>
    
61.         <div class="page">
    
62.                 <div>
    
63.                         <p class="rnum">5</p>
    
64.                         <p>第五页内容</p>
    
65.                 </div>
    
66.                 <div>
    
67.                         <p class="lnum">6</p>
    
68.                         <p>第六页内容</p>
    
69.                 </div>
    
70.         </div>
    
71.         <!-- 加页开始 本行需删掉
    
72.         <div class="page">
    
73.                 <div>
    
74.                         <p class="rnum">N</p>
    
75.                         <p>第N页内容</p>
    
76.                 </div>
    
77.                 <div>
    
78.                         <p class="lnum">N+1</p>
    
79.                         <p>第N+1页内容</p>
    
80.                 </div>
    
81.         </div>
    
82.         加页结束 本行需删掉-->
    
83.         <div class="page cover">
    
84.                 <div><!-- 内封 -->
    
85.                         <p class="rnum">内封</p>
    
86.                         <h2>内封</h2>
    
87.                 </div>
    
88.                 <div><!-- 封底 -->
    
89.                         <p class="rnum">花潮出版社2022</p>
    
90.                         <h2>封底</h2>
    
91.                 </div>
    
92.         </div>
    
93. </div>
    
94. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1904142246.mp3" autoplay="autoplay" loop="loop"></audio>
    
95. 
    
96. <script>
    
97. let book = document.querySelector(".book"), page = document.querySelectorAll(".page"), aud = document.querySelector("#aud");
    
98. let idx = 1, all = page.length, currentPage = 0, auto = 3, timer;//auto为自动翻页间隔时间（秒）
    
99. 
    
100. setzIdx();
     
101. setAuto();
     
102. 
     
103. book.onmousemove = () => { clearTimeout(timer); }
     
104. book.onmouseout = () => { setAuto(); }
     
105. book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
     
106. 
     
107. function turnpage(){
     
108.         if(idx == 1) { //左翻
     
109.                 if(currentPage != all){
     
110.                         page[currentPage].style.animation = "rot1 .5s linear forwards";
     
111.                         page[currentPage].children[0].style.display = "none";
     
112.                         page[currentPage].children[1].style.display = "block";
     
113.                         page[currentPage].children[1].style.transform = "rotateY(-180deg)";
     
114.                 }
     
115.         } else { //右翻
     
116.                 if(currentPage > 0) {
     
117.                         page[currentPage-1].style.animation = "rot2 .5s linear forwards";
     
118.                         page[currentPage-1].children[1].style.display = "none";
     
119.                         page[currentPage-1].children[0].style.display = "block";
     
120.                         page[currentPage-1].children[1].style.transform = "rotateY(0deg)";
     
121.                 }
     
122.         }
     
123.         currentPage += idx;
     
124.         if(currentPage >= all) idx = -1;
     
125.         if(currentPage <= 0) idx = 1;
     
126.         setzIdx();
     
127. }
     
128. 
     
129. function setAuto() {
     
130.         clearTimeout(timer);
     
131.         timer = setTimeout(() => {
     
132.                 turnpage();
     
133.                 setAuto();
     
134.         }, auto * 1000);
     
135. }
     
136. 
     
137. function setzIdx(){
     
138.         if( currentPage < 0 || currentPage > all -1) return false;
     
139.         for(j=0; j<all; j++){
     
140.                 page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
     
141.         }
     
142.         if(currentPage <= all - 1) page[currentPage].style.zIndex = all;
     
143. }
     
144. </script>

复制代码

马黑黑

小黑书v3几点说明：

一、自动翻页：间隔指定时间自动翻页，时间设定由发布者设置，在JS中修改 auto 变量值，例如 auto = 3，表示每隔3秒中翻页。v3无手动翻页功能，暂停翻页可将鼠标指针移至书本区域，鼠标指针为手型形状是暂停翻页，移出鼠标指针、指针为常规状态时恢复自动翻页功能，间隔时间重计。

二、背景音乐：程序以HTML5 audio标签加载音乐背景，由JS代码控制音乐的暂停与续播，用户界面的操作是在书本区域单击鼠标。说明一下：在书本上对文本、图像等的鼠标点击操作会影响音乐的播放。不需要背景音乐的请将audio相关代码剔除，一是HTML audio标签，二是JS中 aud 变量声明以及 book.onclick() 事件函数共两处代码。

三、样式使用：小黑书提供少量CSS样式供发书者使用，例如书名，可以使用 .tit 选择器，章节标题可以使用 h2，红色文本可以使用 .red 选择器、右对齐使用 .right 选择器、居中使用 .mid 选择器等，也可以自己增加或修改原有选择器。

样式使用举例，书名、居中、红色：

<p class="tit mid red">书名</p>

四、小黑书脚本程序可以任意修改、使用、分发与传播，作者不保留任何权限，也同样不保留因种种原因而可能产生的任何担责责任。

东篱闲人

看图应该特别好用，看字怕是跟不上。。。

马黑黑

东篱闲人 发表于 2022-5-27 12:56
看图应该特别好用，看字怕是跟不上。。。

鼠标移上去就暂停了的，另外，可更改 auto 变量值

东篱闲人

马黑黑 发表于 2022-5-27 12:57
鼠标移上去就暂停了的，另外，可更改 auto 变量值

嗯嗯，那就不错了。。。

马黑黑

东篱闲人 发表于 2022-5-27 12:58
嗯嗯，那就不错了。。。

试试吧

东篱闲人

马黑黑 发表于 2022-5-27 13:00
试试吧

嗯嗯嗯。。。

马黑黑

东篱闲人 发表于 2022-5-27 13:04
嗯嗯嗯。。。

梦油

真是很高级的设计了。

小辣椒

黑黑，这个是定稿了吗

小辣椒

这个居然首页封面封底和里面的页面颜色不一样了，可以直接用，不用改了

小辣椒

只是书本周围的白色透明度更加淡，范围也是大了一点

红影

好看的小黑书，非常喜欢的颜色搭配，很是清新养眼

红影

小朋友不会翻书，所以黑黑设计的六一书本都是自动翻页的

马黑黑

红影 发表于 2022-5-27 16:48
小朋友不会翻书，所以黑黑设计的六一书本都是自动翻页的

这个还不错吧

马黑黑

梦油 发表于 2022-5-27 13:29
真是很高级的设计了。

一般一般

马黑黑

小辣椒 发表于 2022-5-27 15:18
黑黑，这个是定稿了吗

61特别版（定稿）

马黑黑

红影 发表于 2022-5-27 16:47
好看的小黑书，非常喜欢的颜色搭配，很是清新养眼

小盆友会喜欢的，素雅而清新，没有歪瓜裂枣的插图

马黑黑

小辣椒 发表于 2022-5-27 15:20
这个居然首页封面封底和里面的页面颜色不一样了，可以直接用，不用改了

嗯，但还是建议根据内容设定封面、内页样式