我有一个网页，我想添加一个漂亮的翻页效果。我见过很多 jQuery 插件，但我有一些问题和不喜欢。
这就是我想要的：
- 当动画运行时，我必须能够看到翻页中的内容。
- 我不想只是滑动内容。我需要一些看起来像翻书页的东西。
我最喜欢的插件是 jFlip，但它只适用于图像。我想要这种效果，但要在其中使用标准 HTML 代码。
有谁知道该怎么做？
谢谢！
I have a web page and I want to add a nice turning page effect. I have seen lots of jQuery plugins but I had some issues and dislikes.
This is what I want:
- While the animation is running, I have to be able to see the content in the turning page.
- I don't want just to slide the content. I need something that looks like a book page turning.
The plugin I liked the most is jFlip, but it just works with images. I'd like this effect but working with standard HTML code in it.
Does anyone know how to do this?
Thanks!
发布评论
评论（3）
jQuery sexy Curl 插件满足您的需求吗？ （同时请记住，没有人会完全拥有您想要的东西）
Does the jQuery Sexy Curls plugin suit your needs? (while keeping in mind that no one is going to have exactly what you want)
您必须使用图像来给人一种翻页的印象。
You must use an image to give the impression of a page turning.
最初我是这样写的：据我所知，jQuery 没有一个真正出色的翻页效果。他们（少数）都有缺点。以下是我的发现：
编辑：我重新考虑了这一点，现在我认为 imBookFlip 确实是一个用 jQuery 编写的很棒的翻页效果。为什么我改变了看法？这是因为我自己修改了脚本以克服动画的一个缺点，正如我的原始帖子所示...
imBookFlip： http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/
这是正是我们正在寻找的...我的意思是，几乎就是这样！如果实际的翻页效果没有将旧图像留在原处，只是在翻页完成后将其替换为新页面，那就完美了。但这并不是什么大问题（请参阅下面的已解决此问题的修改脚本）
它在很多方面都很好，因为即使页面上的所有示例（imBookFlip Demo）显然仅使用图像，它与 div 标签一起使用，因此任何内容都是可能的（在示例中，他们使用了空div 元素与背景图像，因此您可以组合图像和内容）。我正在为我的妻子创建一个作品集，她是一名图书管理员，我正在使用这个组件来创建一本包含她信息的书，它仍在进行中，使用的字体只是为了展示，但你可以看看这个想法： http://lucianasciammarella.com.br
编辑：我刚刚更新了脚本，通过在翻页动画时不将旧图像保留在原处，使动画更加流畅。现在看起来更加现实。我妻子的作品集页面已经在运行更新后的脚本，可以直接在此处下载：http: //lucianasciammarella.com.br/jquery.imBookFlip-0.6A.js
EDIT2：我已经联系了原作者并用我更新的脚本在网站上发表了评论，但奇怪的是他只是删除了我的帖子而没有回复...我真的想确保我不想盗用任何人的创作，正如我下面所说的，所有功劳都归他一人所有！
（请记住，我所做的只是添加了两行代码，所有功劳归原作者所有，并且由于我没有更改任何其他内容，要了解如何使用它，请参阅原始站点，或者查看我妻子的页面源代码...)
使用 jQuery 赞助翻转墙： http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
这是一个更简单的翻转，但在很多方面都令人惊叹。它可以扩展为翻页书。它也适用于任何内容。唯一的问题是，目前它翻转页面的中心，而不是像书页一样......（毕竟它不是为了翻页效果......）
希望这两个可以帮助你......现在如果如果你想要一个非常简洁的翻页效果，你可以使用 DevExpress Silverlight 书籍组件（转到 http://demos.devexpress .com/AgCoreDemos/ 单击左侧的“控件”，然后选择“图书”或“图书日历”演示）
Originally I've written this: AFAIK there is not a single really great page turning effect for jQuery. All of them (few) have shortcomings. Here are my findings:
EDIT: I've reconsidered this and now I think that imBookFlip is indeed a great page turning effect written in jQuery. Why I've changed my opinion? It's because I've modified the script myself to overcome one shortcoming of the animation as my original post bellow shows...
imBookFlip: http://grasshopperpebbles.com/ajax/jquery-plugin-imbookflip-page-turning-without-flash/
This is exactly what we are looking for... I mean, it almost is! It would be perfect if the actual page flipping effect didn't leave the old image in-place, only substituting it for the new page after the flip is completed. But that is not that much of a problem (SEE BELLOW FOR MY MODIFIED SCRIPT WITH THIS ISSUE RESOLVED)
It is good in many ways because even though all samples on the page (imBookFlip Demo) apparently uses only images, it works with div tags, so any content is possible (in the samples, they used empty div elements with background images, so you can combine both images and content). I'm creating a portfolio for my wife, who is a Librarian, and I'm using this component to create a book with her information, it is still a work in progress, the fonts used were just for a showcase, but you can get the idea taking a look at: http://lucianasciammarella.com.br
EDIT: I've just updated the script to make the animation smoother by not leaving the old image in place while animating the page flip. Now it looks much more realistic. My wife's portfolio page is already running the updated script and it can be downloaded directly here: http://lucianasciammarella.com.br/jquery.imBookFlip-0.6A.js
EDIT2: I've contacted the original author and posted a comment on the site with my updated script, but he strangely simply deleted my post with no reply... I really want to make sure I don't want to appropriate the creation of anyone, as I say bellow all credit goes to him alone!
(keep in mind that all I did was to add two lines of code, all the credits go to the original author, and since I didn't change anything else, to learn how to use it, please refer to the original site, or see my wife's page source code...)
Sponsor Flip Wall With jQuery: http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/
This is a simpler flip, but amazing in many ways. It can be extended to work as a page book flip. It works with any content too. The only problem is that currently it flips over the center of the page, not like a book page... (after all it was not intended for a page flip effect...)
Hope these two can help you... Now if you want a really neat page flip effect, you can use DevExpress Silverlight book component (go to http://demos.devexpress.com/AgCoreDemos/ click in Controls on the left, and then choose the Book or Book Calendar demo)