blocks|key|1176655|text|您可能会看到基于HTML5的翻页程序的另一个(很好的)实现：http://jpageflipper.codeplex.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176656|它真的很好，而且是以jQuery插件的形式实现的。|1176657|entityMap|0|LINK|mutability|MUTABLE|url|http://jpageflipper.codeplex.com/^0|U|X|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

You might have a look at another (nice one) implementation of HTML5-based page flipper: <a href="http://jpageflipper.codeplex.com/" rel="nofollow noreferrer">http://jpageflipper.codeplex.com/</a>

It's really nice and it's implemented as a jQuery plugin.

blocks|key|1176551|text|你可以试试jFlip，它是一个jQuery插件，它不兼容IE，但我猜这对你来说不是问题，因为你要求的是HTML5。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176552|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jquery.info/scripts/jFlip/demo.html^0|5|5|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can try <a href="http://www.jquery.info/scripts/jFlip/demo.html" rel="nofollow noreferrer">jFlip</a>, it's a jQuery Plugin, It's not IE-compliant but I guess it's not a problem for you since you are asking for HTML5.

blocks|key|1392365|text|这是一个jquery插件，非常漂亮|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1392366|http://www.turnjs.com/#home|offset|length|1392367|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|R|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

This one is a jquery plugin and pretty nifty

<a href="http://www.turnjs.com/#home" rel="noreferrer">http://www.turnjs.com/#home</a>

blocks|key|1176696|text|这是我使用HTML5的Canvas元素&+jQuery构建的一个HTML5翻页应用程序。它被称为RectoVerso。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176697|我还遇到了这个：http://romancortes.com/ficheros/page-flip.html|1176698|这是只用CSS3完成的。|1176699|entityMap|0|LINK|mutability|MUTABLE|url|http://10k.aneventapart.com/Entry/325/|1|http://romancortes.com/ficheros/page-flip.html^0|1C|A|0|0|8|1A|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

Here is an HTML5 Page flip App that I built using HTML5's Canvas Element &amp; jQuery. It's called <a href="http://10k.aneventapart.com/Entry/325/" rel="nofollow">RectoVerso</a>.

I also ran across this one: <a href="http://romancortes.com/ficheros/page-flip.html" rel="nofollow">http://romancortes.com/ficheros/page-flip.html</a> 
Which is done with only CSS3.

blocks|key|1176766|text|查看此http://www.20thingsilearned.com/home|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176767|entityMap|0|LINK|mutability|MUTABLE|url|http://www.20thingsilearned.com/home^0|3|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

see this <a href="http://www.20thingsilearned.com/home" rel="nofollow">http://www.20thingsilearned.com/home</a>

blocks|key|1392275|text|根据Narendrakumar链接到的20+Things+I+Learned+About+Browsers+and+the+Web书中的内容，有一个关于创建自己的翻页效果的清晰且信息丰富的case+study。这是一个很好的模仿实现，案例研究很清楚相关的代码样本，它是由Fi公司的一位高级交互开发人员编写的，该公司开发了这本书。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1392276|entityMap|0|LINK|mutability|MUTABLE|url|http://www.20thingsilearned.com/en-US/home|1|http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html^0|J|1A|0|2M|A|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

There is a clear and informative <a href="http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html" rel="nofollow">case study</a> about creating your own page flip effect based on the one in the <a href="http://www.20thingsilearned.com/en-US/home" rel="nofollow">20 Things I Learned About Browsers and the Web</a> book that Narendrakumar linked to. It’s a great implementation to imitate, the case study is clear with relevant code samples, and it was written by a senior interactive developer for Fi, the company who developed the book.

blocks|key|1176747|text|http://js1k.com/2010-first/demo/441|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176748|尽可能紧凑:D|1176749|entityMap|0|LINK|mutability|MUTABLE|url^0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]]|C|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|4]]]]

<a href="http://js1k.com/2010-first/demo/441" rel="nofollow">http://js1k.com/2010-first/demo/441</a> 
As compact as possible :D

blocks|key|1392201|text|http://www.romancortes.com/blog/pure-css3-page-flip-effect/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1392202|entityMap|0|LINK|mutability|MUTABLE|url^0|0|1N|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@$A|L|B|M|1|N]]|C|$]]|$1|D|3|-4|5|6|7|O|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|4]]]]

<a href="http://www.romancortes.com/blog/pure-css3-page-flip-effect/" rel="nofollow">http://www.romancortes.com/blog/pure-css3-page-flip-effect/</a>

blocks|key|1176591|text|这可以通过SVG的<foreignObject>元素和SVG转换更好地完成。This+blog+post+by+Mark+Finkle有一些关于旋转东西的信息，就像你在“翻页/翻页”效果中需要做的那样。据我所知，只有Gecko+1.9%2B和WebKit支持这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1176592|entityMap|0|LINK|mutability|MUTABLE|url|http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/^0|9|F|12|T|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

This is better done with SVG's <code>&lt;foreignObject&gt;</code> element and SVG transforms. <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/" rel="nofollow noreferrer">This blog post by Mark Finkle</a> has some info on rotating stuff as you would need to do in a "page flip/turn" effect. As far as I know, only Gecko 1.9+ and WebKit support this.

Has anyone tried recreating the page flip effect with images like you commonly see in Adobe Flash with JavaScript and HTML 5's canvas tag?

Are there any frameworks or JQuery plug-ins that do this type of effect?

The page flip in Flash allows you to grab a corner of the simulated book page and flip the page like you would flip a real book's page.

I really want to learn how to do this with JavaScript and HTML 5's canvas tag, but not sure where to start nor what formulas would be necessary.

<a href="http://www.actionscript.org/showMovie.php?id=459" rel="noreferrer">Example page flip in flash</a>

How to do a JavaScript HTML 5 Canvas image "page flip" like you commonly see in Flash?

jQuery

HTML5

有没有人尝试过用你在Adobe Flash中常见的带有JavaScript和HTML5的canvas标签的图像来重现翻页效果？有没有框架或JQuery插件可以实现这种效果？Flash中的翻页功能允许您抓取模拟图书页面的一角，并像翻转真实图书的页面一样翻转页面。我真的很想学习如何使用JavaScript和HTML5的canvas标签做到这一点，但不确定从哪里开始，也不确定需要什么公式。

问如何做一个FlashHTML5画布图像“翻页”，就像你通常在JavaScript中看到的那样？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何做一个FlashHTML5画布图像“翻页”，就像你通常在JavaScript中看到的那样？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何做一个FlashHTML5画布图像“翻页”，就像你通常在JavaScript中看到的那样？
EN