小黑书v3（六一特别版）

马黑黑 发表于 2022-5-27 12:45

本帖最后由马黑黑于 2022-5-27 23:36 编辑 <br /><br /><style>
.book {/* 容器 */
left: -214px; margin-top: 50px; display: flex; align-items: center;
font: normal 1em sans-serif; width: 1024px; height: 600px;
perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张高度小于父元素30px*/
padding: 20px;width: 478px; height: 570px; left: 50%; transform-origin: left;
background: lightseagreen linear-gradient(rgba(255,255,255, .95), rgba(255,255,255, .75));
box-shadow: inset -3px -3px 6px rgba(255,255,255,.5), 2px 2px 4px #eee;
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; }/* 双数页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
@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; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.rnum { position: absolute; bottom: 6px; right: 12px; color: #000; font-size: 10px; }/*右页码*/
.lnum { position: absolute; bottom: -14px; left: -4px; color: #000; font-size: 10px; }/*左页码*/
.tit { font: bold 3em / 6em sans-serif; color:olive; text-shadow: 1px 1px 2px gray; letter-spacing: 20px; }/* 书名 */
.mid { text-align: center; }/* 居中对齐 */
.right { text-align: right; }/* 右对齐 */
.red { color: red; }/* 红色文本 */
</style>

<div class="book">
<div class="page cover">
<div>
<p class="rnum">花潮出品</p>
<p class="tit mid">书名</p>
</div>
<div>
<p class="lnum">bb3</p>
<h2>扉页</h2>
</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 cover">
<div>
<p class="rnum">内封</p>
<h2>内封</h2>
</div>
<div>
<p class="rnum">花潮出版社2022</p>
<h2>封底</h2>
</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1904142246.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let book = document.querySelector(".book"), page = document.querySelectorAll(".page"), aud = document.querySelector("#aud");
let idx = 1, all = page.length, currentPage = 0, auto = 3, timer;//auto为自动翻页间隔时间（秒）

setzIdx();
setAuto();

book.onmousemove = () => { clearTimeout(timer); }
book.onmouseout = () => { setAuto(); }
book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }

function turnpage(){
if(idx == 1) { //左翻
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) {
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
}
}
currentPage += idx;
if(currentPage >= all) idx = -1;
if(currentPage <= 0) idx = 1;
setzIdx();
}

function setAuto() {
clearTimeout(timer);
timer = setTimeout(() => {
turnpage();
setAuto();
}, auto * 1000);
}

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-27 12:46

马黑黑 发表于 2022-5-27 12:48

小黑书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

看图应该特别好用，看字怕是跟不上。。。{:5_112:}

马黑黑 发表于 2022-5-27 12:57

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

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

东篱闲人 发表于 2022-5-27 12:58

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

嗯嗯，那就不错了。。。{:5_116:}

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

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

试试吧

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

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

嗯嗯嗯。。。

马黑黑 发表于 2022-5-27 13:10

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

{:5_108:}

梦油发表于 2022-5-27 13:29

真是很高级的设计了。

小辣椒 发表于 2022-5-27 15:18

黑黑，这个是定稿了吗

小辣椒 发表于 2022-5-27 15:20

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

小辣椒 发表于 2022-5-27 15:22

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

红影发表于 2022-5-27 16:47

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

红影发表于 2022-5-27 16:48

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

马黑黑 发表于 2022-5-27 17:43

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

这个还不错吧

马黑黑 发表于 2022-5-27 17:44

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

一般一般

马黑黑 发表于 2022-5-27 17:44

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

61特别版（定稿）

马黑黑 发表于 2022-5-27 17:45

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

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

马黑黑 发表于 2022-5-27 17:46

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

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

页: [1] 2 3

花潮论坛's Archiver

小黑书v3（六一特别版）