javascript 非 Flash 翻页书 [跨浏览器]
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7371838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Non-Flash Flip Book [Cross-Browser]
提问by Marc Uberstein
I am starting a new project and my main home page element will be a Flip Book.
我正在开始一个新项目,我的主要主页元素将是一本翻书。
I prefer staying away from Flash and HTML5.
我更喜欢远离 Flash 和 HTML5。
The problem is that I am having a hard time finding a Full Cross Browser Jquery/Javascript Flip Book that has the capability of the CLICK AND DRAG event. (I don't want a normal click and flip.)
问题是我很难找到具有单击和拖动事件功能的完整跨浏览器 Jquery/Javascript 翻转书。(我不想要正常的点击和翻转。)
Does anyone have or know of a full cross browser Click and Drag Flip Book?
有没有人拥有或知道完整的跨浏览器单击并拖动翻页书?
OR if you have an example, not cross browser, what alternative cross browser overrides would be best to use?
或者,如果您有一个示例,而不是跨浏览器,那么最好使用哪些替代的跨浏览器覆盖?
采纳答案by Marc Uberstein
Here is a link with a few choices :
这是一个包含几个选择的链接:
http://cssnerd.com/2011/12/08/animated-css3-pageflip-flipbook-with-a-little-jquery/
http://cssnerd.com/2011/12/08/animated-css3-pageflip-flipbook-with-a-little-jquery/
On the page you will see :
在页面上,您将看到:
jQuery version(that @Arno posted)
jQuery 版本(@Arno 发布的)
- They updated it on August 8, 2012 and is looking much better
- Works on iPad
- IE7 & IE8 some shading issues when paging (im not even gonna test IE6)
- http://builtbywill.com/code/booklet/
- 他们在 2012 年 8 月 8 日更新了它,看起来好多了
- 适用于 iPad
- IE7 和 IE8 分页时的一些阴影问题(我什至不会测试 IE6)
- http://builtbywill.com/code/booklet/
Pure CSS3 version
纯CSS3版本
- Only works on Chrome (and buggy on Safari)
- Smooth page flip, but too limited
- http://www.romancortes.com/ficheros/page-flip.html
- 仅适用于 Chrome(在 Safari 上有问题)
- 流畅的翻页,但太有限
- http://www.romancortes.com/ficheros/page-flip.html
HTML5 version(coz we can't ignore the non-crossbrowser html5 anymore)
HTML5 版本(因为我们不能再忽略非跨浏览器的 html5)
- It only gives the example : http://www.20thingsilearned.com
- Here is the proper tutorial : http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip/
- 它只给出了例子:http: //www.20thingsilearned.com
- 这是正确的教程:http: //www.html5rocks.com/en/tutorials/casestudies/20things_pageflip/
3d flipbook without a HTML5 canvas version
没有 HTML5 画布版本的 3d 翻书
- Major performance issues
- http://webkit-os.pixelass.com/flipbooktest/
回答by ericosg
回答by Arno
You can try http://builtbywill.com/code/booklet/. It uses jQuery and jQuery UI, and supports click and drag.
你可以试试http://builtbywill.com/code/booklet/。它使用 jQuery 和 jQuery UI,并支持单击和拖动。
回答by CPhelefu
You can use the PDF-to-HTML flip generator.
您可以使用PDF-to-HTML 翻转生成器。