书本翻页效果


Turn.js

书本翻页效果_第1张图片

turn.js是一款用来实现纸制书翻页的jQuery插件。使用硬件加速,跨平台,容易维护,体积小(不到15K)。基于HTML5和jQuery实现。Turn.js 支持硬件加速来让翻页效果更加平滑。

可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。

Turn.js

Booklet

书本翻页效果_第2张图片

Booklet可能是拥有最多选项的插件。你可以通过键盘,链接,或者定时自动翻页。每一页都有一个单独的URL,可以被收藏。

Booklet

BookBlock

书本翻页效果_第3张图片

BookBlock 是一个 jQuery 插件,用来制作带有翻页效果的小书册。可以用任何形式的内容,比如图像或文本。插件会在翻页时利用变形模拟手工翻页,并产生重叠的阴影以达到更逼真的效果。

BookBlock

jFlip

书本翻页效果_第4张图片

这个插件将一个图片库做成一本书。您可以翻动书页,以查看下一个或上一个图像,当悬浮在图像区域可点击或拖动图画。

jFlip

Notebook Page Flip

书本翻页效果_第5张图片

Notebook Page Flip是Booklet jQuery插件的一个定制版。这个插件可以在一个翻页导航,用一本书的风格布局显示最新的博客文章。

Notebook Page Flip

imBookFlip

书本翻页效果_第6张图片

imBookFlip插件可以在iframe中加载了一本书,或直接在页面上。这本书的页面可以被设置为只有手动点击时才打开,或点击第一页(封面)就开始自动翻转。

imBookFlip


 jPageFlip    

jPageFlip是一个高度可定制的jQuery插件,用来创建类似书籍界面的效果。它支持鼠标点击翻页,也支持透明和半透明的图片文件。


Flippage

http://www.oschina.net/p/flippage

Flippage插件可以将div中内容转换为书籍样式(实现翻页)。它也可以用在触控设备上。

这个插件的翻页效果是在现有的图片范围内。使用了HTML5,CSS3以及硬件加速。这个插件也支持移动浏览器。



CSS Page Flip

https://github.com/jamesyu/css_page_flip

CSS Page Flip 是一个使用 CSS3 和 jQuery 实现的页面翻页效果,要求基于 Webkit 的浏览器。



——————————————————————————————————————————————————————————————

Flipboard翻页效果

http://code4app.com/category/viewtransition  视图切换






你可能感兴趣的:(JavaScript,jQuery,CSS)