Question

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

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

使用下面的示例代码，如果我将书打开到第1页，那么＆＃34;透明＆＃34;磨损的边缘看起来是白色而不是显示皮革硬背。如果我转到第2页和第3页，两个磨损的页面看起来都像预期的那样透明，但如果我将鼠标悬停在第3页的翻页上，则第2页的边缘变为白色，反之亦然。

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

请帮助，因为我已经在这里工作了很长时间，这是我需要解决的最后一部分才能开始写我的书。

编辑：如果这有帮助，我也使用第4版的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>

Answer 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 docs中提到的小提琴：

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

页面透明度在turn.js flipbook中无法正常工作

1 个答案: