JavaScript 和 CSS 中类似 iBooks 的翻页？答案

【问题标题】：iBooks-like page flip in JavaScript and CSS?JavaScript 和 CSS 中类似 iBooks 的翻页？
【发布时间】：2011-07-07 12:05:40
【问题描述】：

好的，我一直在用谷歌搜索，希望这里有人知道可以指点我的地方。

我正在寻找一种 JavaScript 的翻页动画，它与 Apple 对 iBooks 所做的类似，只有翻过一页才能显示下一页。

（编辑：也许我的描述不够清楚：我正在寻找一种翻页效果，它可以将一个完整的普通 HTML 网站（例如想象这个 stackoverflow 页面）转换到另一个页面，例如“通过应用翻页效果添加问题”屏幕，例如单击“”时。我知道这可能是一件难以实现的事情，因为它涉及准备好数据，显示一个页面，进行转换-效果，然后显示第二页，而第一页可以从内存中释放。不过，在所有 HTML5，JS 和 CSS 热潮中，我希望有人做出这样的过渡效果，我希望如果那里有一个，这里有人知道在哪里可以找到它。遗憾的是，我在 JS 和 CSS 方面太烂了，无法自己完成。）

这是一个不错的纯 CSS 示例（始终显示两个页面宽度）：

http://builtbywill.com/code/booklet/

这是另一个例子（遗憾的是它需要在翻转后显示两页）：

http://www.romancortes.com/ficheros/page-flip.html

我需要这种效果只翻转一页，并且只在翻转后显示第二个 HTML 页面。您知道执行此操作的库或准备使用的脚本吗？我绝对不希望 Flash 或 Silverlight 成为解决方案的一部分。

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案1】：

Turn.js 似乎是一个很好的起点。代码是up on GitHub。

【讨论】：

嗨pascal，我们可以在wordpress中实现turn.js吗，如果可以，请指点一下

【解决方案2】：

这是我能找到的最接近 iBooks 的单页翻页，但与 iBooks 相比仍然很奇怪。

http://www.jquery.info/spip.php?article78

http://www.jquery.info/scripts/jFlip/demo.html

顺便说一句，我正在努力实现与您一样的目标，几乎就像“iBooks 克隆”。

这是一些 CSS3 动画，我正在研究它以尝试制作类似的东西（但没有第二页）。

http://romancortes.com/ficheros/page-flip.html

【讨论】：

如果您有任何类似的消息，我很高兴再次收到您的来信。我会将此作为正确答案进行检查，尽管我想到目前为止没有什么像我们搜索的那样。
谢谢。我不是 JS 大师，但我会尽力做到这一点。如果我有什么接近的，我会告诉你的。
@Akku 只是一个更新，我发现了一些不错的东西：html5rocks.com/en/tutorials/casestudies/20things_pageflip.html（演示：html5rocks.com/static/demos/20things_pageflip/example/…）.. 它是画布，但效果很好。
@RaphaelDDL 非常感谢您提供的链接，我看到的和您发布的完全一样。

【解决方案3】：

我最近用纯 CSS 制作了翻页/翻页书效果。好消息是它实际上有一个很好的 3d 效果。尽管它目前仅在 Google Chrome 中运行良好，但对于任何感兴趣的人来说，这可能是一个不错的起点。

http://dream-world.us/2011/12/05/animated-css3-pageflip-flipbook-with-a-little-jquery/

博文包含一个小提琴，所以请随意玩弄代码..

干杯

【讨论】：

【解决方案4】：

在我的诚实意见中：我所知道的最酷的转/翻书是：TurnJS

【讨论】：