JS和CSS实现翻书效果时，图片消失或背面错位如何解决？-css教程-PHP中文网

JS和CSS实现翻书效果时，图片消失或背面错位如何解决？

花韻仙語

发布： 2025-02-22 09:58:19

原创

755人浏览过

JS和CSS翻书效果优化：解决图片消失和背面错位问题

本文探讨使用js和css创建翻书效果时可能遇到的图片消失和背面错位问题，并提供优化后的代码解决这些问题。

JS和CSS实现翻书效果时，图片消失或背面错位如何解决？

问题描述：

在实现点击翻页的翻书效果时，常常遇到以下两个问题：

图片消失: 点击翻页后，图片会消失不见。这是因为在翻页动画中，图片元素的显示属性被错误地设置为了none。
背面错位: 翻到书的背面时，显示的图片并非书的背面图片，而是书的封面图片。这通常是由于图片元素的顺序或CSS样式设置错误导致的。

解决方案：

立即学习“前端免费学习笔记（深入）”；

为了解决上述问题，我们需要对代码进行以下优化：

保持图片可见性: 不要直接将图片元素的display属性设置为none，而是使用opacity: 0;来实现图片的淡出效果，这样图片仍然在页面中，只是视觉上不可见。
正确设置图片顺序和CSS样式: 确保背面图片在HTML结构中位于正确的位置，并且CSS样式能够正确地将背面图片显示在翻页后的位置。这可能需要调整z-index属性，以确保图片不被其他元素遮挡。

优化后的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3翻书效果</title>
<style>
* {
    padding: 0;
    margin: 0;
}
body,html {
    height: 100%;
}
li{
    list-style: none;
}
body {
    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    perspective: 2000px;
    background-color: #212121;
}
.book {
    position: absolute;
    top: 30%;
    left: 40%;
    width: 500px;
    height: 500px;
    background-color: #fff;
    -webkit-transform: rotateX(30deg);
    -ms-transform: rotateX(30deg);
    -o-transform: rotateX(30deg);
    transform: rotateX(30deg);
}
/*开3D效果*/
.pre-3d {               
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    border: 1px solid #1976D2;
    text-align: center;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.front1 {
    background-color: paleturquoise;
}
.front2 {
    background-color: goldenrod;
}   
img{
    width: 100%;
    height: 100%;
    position: absolute; /* Added for better z-index control */
    z-index: -1;
}       
</style>
</head>
<body>
<div class="book pre-3d" id="book">
    <ul>
        <li id="Rcover">封面@@##@@</li>  <!--  封面 -->
        <li class="pre-3d page front2">页1@@##@@</li> <!--  页1 -->
        <li class="pre-3d page front2">页2@@##@@</li> <!--  页2 -->
        <li class="pre-3d page front2">页3@@##@@</li> <!--  页3 -->
        <li class="pre-3d page front2">页4@@##@@</li> <!--  页4 -->
        <li class="pre-3d page front1">背面@@##@@</li> <!-- 背面 -->
    </ul>
</div>

<script>
var book = document.getElementById('book');
var pages = document.getElementsByTagName('li');
var cover = document.getElementById('Rcover');
var currentPage = 5; // Start from the last page

book.onclick = function() {
    if (currentPage > 0) {
        pages[currentPage].style.transform = 'rotateY(-150deg)';
        pages[currentPage].style.transition = '3s';
        pages[currentPage].querySelector('img').style.opacity = 0;
        currentPage--;
    }
};

cover.onclick = function() {
    for (var j = 1; j < 6; j++) {
        pages[j].style.transform = 'rotateY(0deg)';
        pages[j].style.transition = '3s';
        pages[j].querySelector('img').style.opacity = 1;
    }
    currentPage = 5; // Reset to the last page
};
</script>

</body>
</html>

登录后复制

注意: 确保你的img文件夹存在并且包含名为22.jpg, 33.jpg, 44.jpg的图片文件。这段代码假设你的图片是预先准备好的，并且数量与页面数量一致。你需要根据你的实际图片和页面数量调整代码。添加了position: absolute;到img样式中，并调整了页面索引，以确保图片在正确的页面上显示。

通过这些改进，你的翻书效果应该能够正常工作，图片不会消失，并且背面也会正确显示。如果问题仍然存在，请检查你的图片路径和HTML结构是否正确。