队长的翻书代码
我查看了一下源码，问题出在图片代码上。图片的HTML代码应如下：<img src="图片地址" alt="" />
发一张图片的就这么简单的，不用那么复杂。
你的翻书帖子做过修改，我拿不到你原有的完整代码，只能在你现有的基础上做修正。一下是修正后的完整代码：
<style>
.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 620px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: rgba(0,0,0,.0);
}
.page {
background: #FFFFFF;
padding: 0px;
width: 410px;
height: 600px;
left: 50%;
border-left: 1px solid #DCDCDC;
transform-origin: left;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
transform-style: preserve-3d;
position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
.page img { width: 100%; height: 100%; }
@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><img src="https://pic.imgdb.cn/item/626a93bf239250f7c5d6f1e3.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a9475239250f7c5d8ed3f.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626a9638239250f7c5ddb262.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a96dd239250f7c5df9f3d.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626a97d8239250f7c5e24113.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a9890239250f7c5e457bd.jpg" alt="" /></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>
看好HTML部分：<div> <pre><<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"book"</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"page"</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a93bf239250f7c5d6f1e3.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a9475239250f7c5d8ed3f.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"page"</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a9638239250f7c5ddb262.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a96dd239250f7c5df9f3d.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"page"</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a97d8239250f7c5e24113.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color:darkred">div</span>><<span style="color:darkred">img</span> <span style="color: red">src</span><span style="color: blue">=</span><span style="color: magenta">"https://pic.imgdb.cn/item/626a9890239250f7c5e457bd.jpg"</span> alt="" /><<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
<<span style="color: darkred">/div</span>>
</pre>
</div> 本帖最后由 马黑黑 于 2022-4-29 07:23 编辑 <br /><br /><style>
.book {
left: -180px;
display: flex;
align-items: center;
width: 1000px;
height: 620px;
perspective: 1000px;
cursor: pointer;
padding: 10px;
position: relative;
background: #fff;
}
.page {
padding: 0px;
width: 410px;
height: 600px;
left: 50%;
border-left: 1px solid #DCDCDC;
transform-origin: left;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
transform-style: preserve-3d;
position: absolute;
}
.page div:nth-child(1) {}
.page div:nth-child(2) { display: none; }
.page img { width: 100%; height: 100%; }
@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><img src="https://pic.imgdb.cn/item/626a93bf239250f7c5d6f1e3.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a9475239250f7c5d8ed3f.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626a9638239250f7c5ddb262.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a96dd239250f7c5df9f3d.jpg" alt="" /></div>
</div>
<div class="page">
<div><img src="https://pic.imgdb.cn/item/626a97d8239250f7c5e24113.jpg" alt="" /></div>
<div><img src="https://pic.imgdb.cn/item/626a9890239250f7c5e457bd.jpg" alt="" /></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> 大概酱紫，核心部分弄好了。尺寸不合适的自己调整一下下 精美制作，感觉好腻害 {:4_199:} 来看你 发表于 2022-4-29 09:56
精美制作，感觉好腻害
嗯，队长确实腻害 黑黑辛苦了{:4_187:} 红影 发表于 2022-4-29 11:31
黑黑辛苦了
举手之劳。只是队长的代码有点乱，我又只能从源代码中查看，不好整治 马黑黑 发表于 2022-4-29 07:23
大概酱紫，核心部分弄好了。尺寸不合适的自己调整一下下
谢谢老黑。{:4_190:} 加林森 发表于 2022-4-29 18:17
谢谢老黑。
不客气，祝好 马黑黑 发表于 2022-4-29 11:37
举手之劳。只是队长的代码有点乱，我又只能从源代码中查看，不好整治
真不容易，黑黑真有耐心{:4_187:} 马黑黑 发表于 2022-4-29 22:44
不客气，祝好
我修改好了。{:4_191:} 加林森 发表于 2022-4-29 23:00
我修改好了。
看到了，腻害 红影 发表于 2022-4-29 22:54
真不容易，黑黑真有耐心
俺是有耐心之人，传说，等恋人都可以等一千年{:4_170:} 马黑黑 发表于 2022-4-30 08:40
看到了，腻害
{:5_148:}都是你教得好。 马黑黑 发表于 2022-4-30 08:44
俺是有耐心之人，传说，等恋人都可以等一千年
而且是站着等的{:4_173:} 红影 发表于 2022-4-30 22:20
而且是站着等的
这也被你猜到了 马黑黑 发表于 2022-4-30 22:46
这也被你猜到了
想起那首歌曲，站着等你三千年{:4_173:} 红影 发表于 2022-5-2 07:16
想起那首歌曲，站着等你三千年
这样的歌也有？ 马黑黑 发表于 2022-5-2 09:26
这样的歌也有？
有啊，黑黑没听过？
页:
[1]
2