Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一。他们可以用在 Flash,网页或者在线杂志中。使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内容,更加醒目和直观有效。

  除了结合 HTML5 和 CSS3 可以实现这样的动画,也有很多优秀的插件可以帮助你。下面给大家推荐12款最好的 jQuery 书页翻转(Flipbook)插件。

您可能感兴趣的相关文章

1. Turn.js

Turn.js 是一个 JavaScript 库,这将使你的内容看起来像一本真正的书或杂志。Turn.js 是基于 HTML5 的杂志,书籍或目录的最佳选择,只有15KB,适用于手机及平板电脑的浏览器,利用了硬件加速。

2. Flip Page

这个插件用于实现图像的翻转效果(2D 体验的书页翻转) 。它利用了 HTML5 & CSS3 硬件加速和,也可以在移动浏览器中正常工作。

3. jFlip Plugin

这个插件可以让你把一个图片库做成一本书。您可以翻转书页来查看下一张或上一张图片。鼠标悬停在画廊的上的时候可以点击或拖动的动态的角落处进行翻页。

4. Flip Counter

flipCounter 是一个 jQuery 插件,让枯燥的数字显示变成一个大的,漂亮的翻页动画显示。适合用于倒计时,计数器等等。

5. Bookblock

BookBlock 是一个插件,它可用于创建小册子风格的组件,允许“翻页”的导航。任何内容都可以使用,如图像或文本。插件转换只在需要时使用了一些重叠的影子的页面来创建更逼真的效果。

6. Flip

Flip 是一个 jQuery 插件,让你可以很容易的在四个方向翻转你的元素。允许您定义要翻转你的内容的方向,你也可以定义背景颜色,动画的速度,并且它还支持 onAnimation 和 OnEnd 动画中的给定时间的动画执行。

7. Booklet

小册子可能是这些插件中选项最多的一个,因为它允许配置每个变量。页面可以手动打开,通过键盘,可以前后链接切换或者自动播放。

8. Portfolio Flipping Slider

这个翻转滑块插件非常适合用于个人作品集的展示,这种翻转效果是通过在用户点击分页触发的。因此当用户点击作品集中的图像时,图片会翻转360度,当其动画近端影像会以全新的姿态改变。

9. imBookFlip

imBookFlip 插件可以把一个 iframe 或直接在页面上显示的内容变成书本效果。它的页面可以设置为打开时,手动点击或作为自动播放,遗憾的是不支持页面拖动。此外,它的 API 允许直接指向所需的页面。

10. Flippy

Flippy 是一个轻量级的跨浏览器的 jQuery 翻页效果插件,它可以让你翻转你想要的任何 HTML 元素,值得一试。

11. QucikFlip2

QuickFlip 工作原理是利用动画的快捷方式迅速翻转 。同时允许翻页效果平滑地与任何一块标记,无论图像,背景或 CSS,此快捷键可以提高性能。

12. jQuery Notebook Page Flip Animation

这款奇特的 jQuery 笔记本外观使用一个叫做 jQuery Booklet 的 jQuery 动画插件来实现逼真的书本效果。

本文链接:12 Best jQuery Flipbook Plugins for Developer

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

推荐12款实用的 JavaScript 书页翻转效果插件的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. 【精心推荐】几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  3. 几款实用的 JavaScript 图形图表库

    一款好的图表插件不是那么容易找到的.最近项目里需要实现统计图表功能,所以在网上搜罗了一圈,找到一些不错的图表插件,分享大家.众多周知,图形和图表要比文本更具表现力和说服力.这里给大家精心推荐几款实用的 ...

  4. JavaScript 插件的书页翻转效果

    Flipbooks书页面翻转成为在网页设计中最流行的交互动画之中的一个. 他们能够用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果展示他们的产品,更加直观有效. 结合 HT ...

  5. 推荐几款实用的Android Studio 插件

    推荐几款实用的Android Studio 插件 泡在网上的日子 发表于 2015-10-09 10:47 第 17453 次阅读 插件,Android Studio 10 编辑推荐:稀土掘金,这是一 ...

  6. 12个实用的 Javascript 奇淫技巧

    这里分享12个实用的 Javascript 奇淫技巧.JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的 ...

  7. 推荐几款我一直在用的chrome插件(上)

    我用的chrome插件挺多的,所谓工欲善其事必先利其器,我热衷于搜寻好用的工具来让我平时的工作事半功倍.下面介绍几款我正在用的感觉还不错的插件,如果大家还有其它好用的(肯定有,chrome插件库太庞大 ...

  8. 推荐几款我一直在用的chrome插件(下)

    请先看:推荐几款我一直在用的chrome插件(上) 6. Pocket 可以很方便的保存文章.视频等供以后查看,即实现了“Read it later”功能.有了 Pocket,您可以将所有想下次读的内 ...

  9. javascript跟随滚动效果插件代码(javascript Follow Plugin)

    这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...

随机推荐

  1. 查看SSIS Package 部署的历史记录

    1,通过Integration Services Catalogs来查看 打开SSISDB->Projects,查看指定project的version history,这种方式查看Deploye ...

  2. SQL Pass北京举办1周年活动(本次活动特别邀请到了来自微软的SQL Server大师何雷谈数据库职业规划)

    地点:北京微软(中国)有限公司[望京利星行],三层308室 时间:2013年 12 月28日 13:30-16:30 SQL PASS 北京QQ群号:2435349 新浪微群地址:http://q.w ...

  3. 【目录】微软Infer.NET机器学习组件文章目录

    本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.微软Infer.NET机器学习组件目录 1. Infer.NET连载(一 ...

  4. php版本历史

    php最初就是为了快速构建一个web页面而迅速被大家广为接受的.它的好处是在代码中能内嵌html的代码,从而让程序员能再一个页面中同时写html代码和php代码就能生成一个web页面. 这篇文章用时间 ...

  5. 分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility

    1. ExcelUtility功能:  1.将数据导出到EXCEL(支持XLS,XLSX,支持多种类型模板,支持列宽自适应)  类名:ExcelUtility. Export  2.将EXCEL ...

  6. CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...

  7. SQL Server获取下一个编码字符实现继续重构与增强

        我在SQL Server获取下一个编码字符实现的博文中,虽然实现了这个问题,但是感觉维护起来比较麻烦,例如如果调整编码字符串的固定长度,就需要变更三个函数,这样的为何成本确实比较大.面向对象编 ...

  8. 2005 TCO Online Round 1 - RectangleError

    RectangleError Problem's Link Problem Statement You want to draw a rectangle on a piece of paper. Un ...

  9. C#自定义特性实例

    元数据,就是C#中封装的一些类,无法修改.类成员的特性被称为元数据中的注释. 1.什么是特性   (1)属性与特性的区别  属性(Property):属性是面向对象思想里所说的封装在类里面的数据字段, ...

  10. MVC开发经验总结

    网站开发中技术问题的笔记 以下经验基于 MVC 5.2.3 Javascript BUG思考 200 OK真的表示没有问题吗? 有时候Status 200作为WebAPI的返回值,并不表示真的OK,例 ...