日期:2014-05-17  浏览次数:20609 次

HTML5开发的翻页效果

http://www.html5china.com/course/20111012_2244.html

?

HTML5开发的翻页效果

简介 2010年F-i.com和Google Chrome团队合力致力于主题为《20 Things I Learned about Browsers and theWeb》( www.20thingsilearned.com )的web app的宣传教育。这个项目最主要的思想是在传达,用web展现电子书的…

简介
2010年F-i.com和Google Chrome团队合力致力于主题为《20 Things I Learned about Browsers and the?Web》(www.20thingsilearned.com)的web app的宣传教育。这个项目最主要的思想是在传达,用web展现电子书的内容是最合适的选择。因为展现电子书的内容是前所未有的web技术,我们坚信以现在的技术完全可以用一个容器来展现这样的例子。



书籍的封面同时也是《20 Things I Learned About Browsers and the Web》的主页(www.20thingsilearned.com)
我们认为,要实现阅读真正书籍的感觉最好的方法是模仿书籍的阅读体验,同时充分利用电子媒介的优势如导航。我在书籍的视觉和交互效果上面下了很大的功夫,特别是翻页的效果。


开始制作
本教程会带领里学习HTML5电子书的制作流程,并教你用canvas元素和JavaScript来制作自己的电子书。关于JavaScript的基础代码,如变量声明和事件侦听等不在本教程的范围内,具体请参考实例源代码。
开始之前,我们还是先看一下demo的效果吧,这样我们可以有目的行的去学习。

电子书结构
你一定要时时记住,在canvas里绘制的所有信息都无法被搜索引擎搜到,也无法由用户在浏览器中搜索到。由于这个原因,我们在DOM中显示文本内容,然后由JavaScript来操控它。所以电子书的结构非常简单:

XML/HTML Code复制内容到剪贴板
  1. <div?id="book">??
  2. ??<canvas?id="pageflip-canvas"></