先睹为快：小黑书61特别版（预览）

马黑黑 · 发表于 2022-5-26 07:34

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-5-26 07:54 编辑

花潮出品

微软Windows

简史

BB6.1特别版

61版小黑书说明：

一、取消手动点击翻页。自动翻页间隔时间默认2秒，可修改，关键代码是 JS 中 auto = 2

二、暂停翻页：鼠标指针移至书本区域，指针为手型时书本暂不翻页、移出鼠标继续自动翻页

三、背景音乐：单击书本切换播放暂停

四、可能的异常：极端情形下会引发书页疯狂翻页，刷新即可

1

Windows 1.0(1985)

最原始的MICROSOFT标志

2

Windows 2.03(1987)

Microsoft标志开始迈向成熟

3

Windows 3.0(1990)

Windows首个大获成功的版本

4

Windows 3.1(1992)

Logo开始出现有红黄蓝绿组成的"田"字型，形成了我们熟悉的“窗口”Logo

5

Windows 3.11(1993)

Logo的稍作修改

6

Windows NT 3.1(1993)

面向工作站，服务器的Windows版本

7

Windows 95(1995)

蓝天白云的首次出现，IE浏览器也随这个版本出现。

8

Windows 98(1998)

Windows 95的接班人

9

Windows 2000(2000)

Windows 2000是以WindowsNT为架构的操作系统，是真正的32位操作系统

10

Windows ME(2000)

最后一个基于DOS的9X系统Windows系统

11

Windows XP(2001)

史上最受欢迎的系统，服务将近近17年的时间。Windows Logo开始进入旗帜时代

12

Windows Server 2003(2003)

用作服务器的版本

13

WindowsVista(2005)

可以算是微软最失败的Windows版本，但个人觉得是最为酷炫的。首次加入了Aero视觉效果

14

Windows Server 2008(2008)

Windows Server 2003的接班者

15

Windows 7(2009)

继承了WindowsVista的Aero视觉效果。比WindowsVista更加简洁，高效

16

Windows 8(2012)

Logo迈进了“田字牌”时代。Windows8使用了扁平化的Metro界面，使用了WinRT开发平台

17

Windows 10(2012)

Logo跟Windows 8都是“田字牌”。但Windows 10加入了许多新的功能，Cortana语音搜索、全新的动作中心、全新的Edge浏览器、Windows Hello安全登陆。微软宣称Windows10是微软发布的最后一个独立Windows版本。

18

Windows 11(2021)

然后是微软啪啪啪自己打脸，Windows 11出生至今也有些时日了……让我们期待Windows 12……

all for you

音乐相关代码

一、HTML：最后一行

二、JS：

① 变量 aud = document.querySelector('#aud')

② book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }

花潮出版社出版

马黑黑 · 发表于 2022-5-26 07:45

完整代码（本地测试请将CSS代码 .book 选择器中的 left: -214px; 改为 margin: auto;）

<style>
.book {/* 容器 */
left: -214px; margin-top: 50px; display: flex; align-items: center;
font: normal 1em sans-serif; width: 1024px; height: 560px;
perspective: 2000px; cursor: pointer; padding: 10px; position: relative;
}
.page {/* 纸张高度小于父元素30px*/
padding: 20px;width: 478px; height: 530px; 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), 1px 1px 20px rgba(0,0,0,.15);
transform-style: preserve-3d; position: absolute;
}
.page div { width: 100%; height: 100%; }/* 书页 */
.page div img { width: 100%;} /* img标签：限制宽度 */
.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); } }/* 右翻动画 */
.cover { background: darkgreen linear-gradient(rgba(255,255,255, .65), rgba(255,255,255, .95)); }/* 封面封底纸张样式 */
.page p { margin: 0; padding: 4px 0; }/* 各页p标签 */
.page h2 { font: bold 1.3em sans-serif; padding: 8px 0; margin: 0; }/* 各页h2标题 */
.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; text-align: center; }/* 书名 */
.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 cover">
<div>
<p class="rnum">花潮出品</p>
<p>微软Windows</p>
<p class="tit">简史</p>
</div>
<div>
<p class="lnum">BB6.1特别版</p>
<h2>61版小黑书说明：</h2>
<p>一、取消手动点击翻页。自动翻页间隔时间默认2秒，可修改，关键代码是 JS 中 auto = 2</p>
<p>二、暂停翻页：鼠标指针移至书本区域，指针为手型时书本暂不翻页、移出鼠标继续自动翻页</p>
<p>三、背景音乐：单击书本切换播放暂停</p>
<p>四、可能的异常：极端情形下会引发书页疯狂翻页，刷新即可</p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">1</p>
<p>Windows 1.0(1985)<br /><br />最原始的MICROSOFT标志<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/1.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">2</p>
<p>Windows 2.03(1987)<br /><br />Microsoft标志开始迈向成熟<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/2.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">3</p>
<p>Windows 3.0(1990)<br /><br />Windows首个大获成功的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/3.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">4</p>
<p>Windows 3.1(1992)<br /><br />Logo开始出现有红换蓝绿组成的"田"字型，形成了我们熟悉的“窗口”Logo<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/4.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">5</p>
<p>Windows 3.11(1993)<br /><br />Logo的稍作修改<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/5.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">6</p>
<p>Windows NT 3.1(1993)<br /><br />面向工作站，服务器的Windows版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/6.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">7</p>
<p>Windows 95(1995)<br /><br />蓝天白云的首次出现，IE浏览器也随这个版本出现。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/7.jpeg" alt="" /></p>
</div>
<div>
<p class="lnum">8</p>
<p>Windows 98(1998)<br /><br />Windows 95的接班人<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/8.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">9</p>
<p>Windows 2000(2000)<br /><br />Windows 2000是以WindowsNT为架构的操作系统，是真正的32位操作系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/9.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">10</p>
<p>Windows ME(2000)<br /><br />最后一个基于DOS的9X系统Windows系统<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/10.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">11</p>
<p>Windows XP(2001)<br /><br />史上最受欢迎的系统，服务将近近17年的时间。Windows Logo开始进入旗帜时代<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/11.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">12</p>
<p>Windows Server 2003(2003)<br /><br />用作服务器的版本<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/12.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">13</p>
<p>WindowsVista(2005)<br /><br />可以算是微软最失败的Windows版本，但个人觉得是最为酷炫的。首次加入了Aero视觉效果<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/13.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">14</p>
<p>Windows Server 2008(2008)<br /><br />Windows Server 2003的接班者<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/14.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">15</p>
<p>Windows 7(2009)<br /><br />继承了WindowsVista的Aero视觉效果。比WindowsVista更加简洁，高效<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/15.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">16</p>
<p>Windows 8(2012)<br /><br />Logo迈进了“田字牌”时代。Windows8使用了扁平化的Metro界面，使用了WinRT开发平台<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/16.jpeg" alt="" /></p>
</div>
</div>
<div class="page">
<div>
<p class="rnum">17</p>
<p>Windows 10(2012)<br /><br />Logo跟Windows 8都是“田字牌”。但Windows 10加入了许多新的功能，Cortana语音搜索、全新的动作中心、全新的Edge浏览器、Windows Hello安全登陆。微软宣称Windows10是微软发布的最后一个独立Windows版本。<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/17.jpeg" alt="" /></p>
</div>
<div>
<p class="rnum">18</p>
<p>Windows 11(2021)<br /><br />然后是微软啪啪啪自己打脸，Windows 11出生至今也有些时日了……让我们期待Windows 12……<br /><br /></p>
<p><img src="https://638183.freep.cn/638183/t22/51/18.png" alt="" /></p>
</div>
</div>
<div class="page cover">
<div>
<p class="rnum">all for you</p>
<h2>音乐相关代码</h2>
<p>一、HTML：最后一行</p>
<p>二、JS：<br /><br />① 变量 aud = document.querySelector('#aud')<br /><br />② book.onclick = () => { aud.paused ? aud.play() : aud.pause(); } </p>
</div>
<div>
<p class="rnum">花潮出版社出版</p>
</div>
</div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/02/08/5ec4836c87fd69cc93b084c51d1cba3f.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 = 2, timer;
setzIdx();
setAuto();
book.onmousemove = () => { clearInterval(timer); }
book.onmouseout = () => { setAuto(); }
book.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
function turnpage(){
if(idx == 1) { //左翻
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) {
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)";
}
}
currentPage += idx;
if(currentPage >= all) idx = -1;
if(currentPage <= 0) idx = 1;
setzIdx();
}
function setAuto() { timer = setInterval(turnpage, auto * 1000); }
function setzIdx(){
if( currentPage < 0 || currentPage > all -1) return false;
for(j=0; j<all; j++){
page[j].style.zIndex = j >= currentPage ? page[j].style.zIndex = all - j : page[j].style.zIndex = j + 1;
}
if(currentPage <= all - 1) page[currentPage].style.zIndex = all;
}
</script>