书中自有颜如玉
本帖最后由 马黑黑 于 2022-4-28 22:14 编辑 <br /><br /><style>.book {
left: -214px;
display: flex;
align-items: center;
width: 1024px;
height: 700px;
perspective: 3000px;
cursor: pointer;
padding: 10px;
position: relative;
}
.page {
padding: 20px;
width: 478px;
height: 670px;
left: 50%;
background-color: rgba(75,92,92,1);
background: linear-gradient(to right, rgba(75,92,92,1) 0%, rgba(47,79,79,1) 1%, rgba(105,105,105,1) 100%);
box-shadow: inset -10px -3px 6px rgba(1,12,12,1), 1px 1px 20px rgba(0,0,0,.15);
box-shadow: inset -2px 2px 6px rgba(255,255,255,.1), 1px 1px 20px rgba(0,0,0,.15);
transform-origin: left;
transform-style: preserve-3d;
position: absolute;
}
.page div { width: 100%; height: 100%; }
.page div:nth-child(1) { }
.page div:nth-child(2) { display: none; }
.page p { margin: 0; padding: 4px 0; }
.rnum { position: absolute; bottom: 4px; right: 10px; color: #888; font-size: 10px; }
.lnum { position: absolute; bottom: -16px; left: -6px; color: #888; font-size: 10px; }
.tit { writing-mode: vertical-lr; font: bold 3em / 4em sans-serif;color:#e6e6e6;text-shadow: 1px 1px 2px gray; }
@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
</style>
<div class="book">
<div class="page">
<div>
<p class="rnum">All in here</p>
<p style="text-align: right; color: #888; font-size: 12px;">马<br>黑</p>
<p class="tit">書中自有顏如玉</p>
</div>
<div style="background:url('https://638183.freep.cn/638183/t22/h1.jpg') no-repeat center/cover"><p> 开卷有益 看图洗眼</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h2.jpg') no-repeat center/cover"><p class="rnum">1</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h3.jpg') no-repeat center/cover"><p class="lnum">2</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h4.jpg') no-repeat center/cover"><p class="rnum">3</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h5.jpg') no-repeat center/cover"><p class="lnum">4</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h6.jpg') no-repeat center/cover"><p class="rnum">5</p></div>
<div style="background:url('https://638183.freep.cn/638183/t22/h7.jpg') no-repeat center/cover"><p class="lnum">6</p></div>
</div>
<div class="page">
<div style="background:url('https://638183.freep.cn/638183/t22/h8.jpg') no-repeat center/cover"><p class="rnum">-End-</p></div>
<div><p class="rnum">花潮出版社出版<br>正版價: ￥99.99</p></div>
</div>
</div>
<script>
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;
setzIdx();
document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page.style.animation = "rot1 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
} else { //后翻
page.style.animation = "rot2 .5s linear forwards";
page.children.style.display = "none";
page.children.style.display = "block";
page.children.style.transform = "rotateY(0deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
}
setzIdx();
}
function setzIdx(){
for(j=0; j<all; j++){
page.style.zIndex = j >= currentPage ? page.style.zIndex = all - j : page.style.zIndex = j + 1;
}
if(page.style.zIndex <= all) page.style.zIndex = all;
}
</script>
本帖最后由 朵拉 于 2022-4-28 22:12 编辑
马黑家的美女 好看极了{:4_178:} 黑黑，俺那个整坏了，你快去给俺治疗治疗吧。。。 东篱闲人 发表于 2022-4-28 22:13
黑黑，俺那个整坏了，你快去给俺治疗治疗吧。。。
图片代码的问题：
<img id="aimg_DnGFG" class="zoom" file="https://s1.ax1x.com/2022/04/28/LXyXm6.jpg" lazyloadthumb="1" border="0" alt="" />
全部改为如下格式：
<img src="图片地址" alt="" />
其他的东东统统不要，那些是论坛的图片伸缩程序所用
马黑黑 发表于 2022-4-28 22:22
图片代码的问题：
辛苦了。。。{:4_190:} 东篱闲人 发表于 2022-4-28 22:23
辛苦了。。。
去弄弄吧。图片尺寸要控制，否则会超出书本边界。 朵拉 发表于 2022-4-28 22:11
马黑家的美女 好看极了
{:4_180:} 本帖最后由 朵拉 于 2022-4-28 22:46 编辑 <br /><br />试着加上音乐，看一看效果{:4_173:}
<script>
let flag = true;
let fan = document.querySelector(".fan");
let au = document.createElement("audio");
au.src = "http://www.kumeiwp.com/sub/filestores/2022/01/31/a0d9b30987b921f50991de5eb42f86d1.mp3";
au.autoplay = flag;
au.loop = true;
fan.appendChild(au);
if(!flag) fan.style.animationPlayState = "paused";
fan.onclick = function(){
flag ? (this.style.animationPlayState = "paused",au.pause(),flag = false) :
(this.style.animationPlayState = "running",au.play(),flag = true);
}
</script> 朵拉 发表于 2022-4-28 22:32
本帖最后由 朵拉 于 2022-4-28 22:46 编辑 试着加上音乐，看一看效果
挺好的，O(∩_∩)O谢谢 书里藏娇，黑黑真舍得拿出来显摆？{:4_173:} 樵歌 发表于 2022-4-29 06:42
书里藏娇，黑黑真舍得拿出来显摆？
为了鼓励大家读书，得有点手段{:4_170:} 马黑黑 发表于 2022-4-29 06:52
为了鼓励大家读书，得有点手段
黑黑早{:4_190:}这手段只能吸引帅哥哈，乍不弄几美男上去吸女粉{:4_172:} 樵歌 发表于 2022-4-29 06:58
黑黑早这手段只能吸引帅哥哈，乍不弄几美男上去吸女粉
你没搞清楚一个社会哲学问题：男人看镁铝，是欣赏别人，愉悦自己；女人看镁铝，是在欣赏自己，愉悦别人。 花潮出版社出版，正版价99.99
纯金版的美女啊{:4_173:} 这个好，包括如何加文字如何加图片都有了，还有一页里文字如何定位，还有如何竖排。真是集大全的书本制作范例{:4_199:} 可以从中学到很多{:4_187:} 红影 发表于 2022-4-29 09:32
花潮出版社出版，正版价99.99
纯金版的美女啊
这都能看得出来，腻害腻害 红影 发表于 2022-4-29 09:40
这个好，包括如何加文字如何加图片都有了，还有一页里文字如何定位，还有如何竖排。真是集大全的书本制作范 ...
根据需要，辅助性质的CSS可以自己设定、丰富，这里仅做简单演示 红影 发表于 2022-4-29 09:40
可以从中学到很多
这个书本，开发到现在，基本没有大的变化，都是修修补补的功能实现 马黑黑 发表于 2022-4-29 10:17
根据需要，辅助性质的CSS可以自己设定、丰富，这里仅做简单演示
这里的功能已经不少了呢，真好。