JS和CSS翻书效果优化：解决图片消失和背面错位问题
本文探讨使用js和css创建翻书效果时可能遇到的图片消失和背面错位问题，并提供优化后的代码解决这些问题。
问题描述：
在实现点击翻页的翻书效果时，常常遇到以下两个问题：
图片消失: 点击翻页后，图片会消失不见。这是因为在翻页动画中，图片元素的显示属性被错误地设置为了none。背面错位: 翻到书的背面时，显示的图片并非书的背面图片，而是书的封面图片。这通常是由于图片元素的顺序或CSS样式设置错误导致的。
解决方案：
立即学习“前端免费学习笔记（深入）”；
为了解决上述问题，我们需要对代码进行以下优化：
网易人工智能
网易数帆多媒体智能生产力平台
206 查看详情
保持图片可见性: 不要直接将图片元素的display属性设置为none，而是使用opacity: 0;来实现图片的淡出效果，这样图片仍然在页面中，只是视觉上不可见。
正确设置图片顺序和CSS样式: 确保背面图片在HTML结构中位于正确的位置，并且CSS样式能够正确地将背面图片显示在翻页后的位置。 这可能需要调整z-index属性，以确保图片不被其他元素遮挡。
优化后的代码：
CSS3翻书效果 * { 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;} - 封面@@##@@
- 页1@@##@@
- 页2@@##@@
- 页3@@##@@
- 页4@@##@@
- 背面@@##@@
var book = document.getElementById('book');var pages = document.getElementsByTagName('li');var cover = document.getElementById('Rcover');var currentPage = 5; // Start from the last pagebook.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};注意: 确保你的img文件夹存在并且包含名为22.jpg, 33.jpg, 44.jpg的图片文件。 这段代码假设你的图片是预先准备好的，并且数量与页面数量一致。 你需要根据你的实际图片和页面数量调整代码。 添加了position: absolute;到img样式中，并调整了页面索引，以确保图片在正确的页面上显示。
通过这些改进，你的翻书效果应该能够正常工作，图片不会消失，并且背面也会正确显示。 如果问题仍然存在，请检查你的图片路径和HTML结构是否正确。
以上就是JS和CSS实现翻书效果时，图片消失或背面错位如何解决？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1144897.html
微信扫一扫 
支付宝扫一扫 
