turn.js 翻书的页面透明度不起作用答案

【问题标题】：Page transparency in turn.js flipbook not workingturn.js 翻书的页面透明度不起作用
【发布时间】：2014-09-10 23:12:52
【问题描述】：

我是 Javascript 和 Jquery 的新手，我目前正在按照杂志教程http://technotz.info/tutorials/2012/9/ebook_turn.js/ 使用 jquery 制作一本交互式书籍。

在大多数情况下，这本书进展顺利，但我遇到了一个小而烦人的问题。你看，对于这个项目，我正在制作一本旧的皮革日记本，我希望书中的页面不平整和磨损。因此，我希望每一页都有一个透明的边缘，显示下面的皮革封面的边缘，但我似乎无法让透明边缘正常工作。

使用下面的示例代码，如果我将书打开到第 1 页，“透明”的磨损边缘看起来是白色的，而不是显示皮革硬背。如果我翻到第 2 页和第 3 页，两个磨损的页面看起来都是透明的，但如果我将鼠标悬停在第 3 页的翻页上，第 2 页的边缘会变成白色，反之亦然。

我尝试在 CSS 中添加 body、#flipbook、#magazine 和 #magazine.turn-page 的透明背景颜色，但同样的结果仍然适用。我能做什么？

请帮忙，因为我多年来一直在做这件事，这是我在开始写书之前需要修复的最后一部分。

编辑：如果有帮助，我也在使用第四版的 turn.js

这是我的 HTML、Javascript 和 CSS 代码：

<!DOCTYPE html>
<html>
<head>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/turn.js"></script>

<style type="text/css">
body{
    background-color:transparent;
}
#magazine{
    width:1002px; //dimensions to show magazine
    height:773px;
    background-color:transparent;
}
#magazine .turn-page{
background-color:transparent;
background-size:100% 100%;
}
#flipbook {
    background-color: transparent;
}
</style>

</head>

<body>
<div id="flipbook">
    <div class="hard" style="background-image:url(pages/cover.png);"> </div> 
    <div class="hard" style="background-image:url(pages/cover.png);"></div>
    <div style="background-image:url(pages/oldpaperright.png);">Page 1</div>
    <div style="background-image:url(pages/oldpaperleft.png);">Page 2</div>
    <div style="background-image:url(pages/oldpaperright.png);">Page 3</div>
    <div style="background-image:url(pages/oldpaperleft.png);">Page 4</div>
    <div class="hard" style="background-image:url(pages/cover.png);"></div>
    <div class="hard" style="background-image:url(pages/cover.png);"></div>
</div>

<script type="text/javascript">
    $("#flipbook").turn({
        width: 1002,
        height: 773,
        autoCenter: true
    });
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

由于您的杂志容器是#flipbook，我认为您应该使用#flipbook .page 作为页面的 CSS 选择器

#flipbook .page {
    background: url(pages/oldpaperright.png);
    /* Other CSS Rules */  
}

你可以使用page-wrapper，hard，odd，even，：

#flipbook .odd {}
#flipbook .even {}
#flipbook .hard {}
#flipbook .page-wrapper {}

来源： http://www.turnjs.com/docs/Main_Page

turnjs 文档中提到的小提琴：

http://jsfiddle.net/blasten/A9a7E/

【讨论】：