javascript - turn.js 翻页簿中的页面透明度不起作用-6ren

javascript - turn.js 翻页簿中的页面透明度不起作用

转载作者：行者123 更新时间：2023-11-28 17:32:19

25

4

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

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

使用下面的示例代码，如果我将书打开到第 1 页，“透明”的磨损边缘看起来是白色的，而不是显示皮革精装书。如果我翻到第 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>

最佳答案

由于您的杂志容器是#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 文档中提到的 Fiddle:

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

关于javascript - turn.js 翻页簿中的页面透明度不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25776553/

25

4

0

文章推荐： css - 缩小 css 类和 id

文章推荐： objective-c - UITableView 仅在调用键盘后填充

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - turn.js 翻页簿中的页面透明度不起作用