本文为你带来15个非常实用的、实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验。

1.  BookBlock

BookBlock可以将任何内容(如图像、文本)创建为翻页效果,带有一个翻页导航,可用于创建小册子等组件。

阅读更多 / 演示

2.  imBookFlip

该插件允许你在iframe或页面中加载电子书,可以设置为在页面加载时开始翻书效果,也可以设置为手动点击时开始。还可以通过Sound Manager添加声音效果。

阅读更多 / 演示

3.  jFlip

该插件可以将图片库转换为书本效果。单击或拖动书角,会出现一个翻页的效果。

阅读更多 / 演示

4.  turn.js

该插件受iBooks和Maps for iOS的启发,基于HTML5实现了一个真实的翻书或杂志的效果。

阅读更多 / 演示

5.  基于jQuery和CSS3 3D Transforms的翻转效果

阅读更多 / 演示

6.  jQuery响应式的翻页书

也可在iPad上运行,无需Flash Player。

阅读更多 / 演示

7  全屏翻转效果

基于BookBlock的全屏翻转效果,也可通过左侧滑出式侧边栏来访问内容。

阅读更多 / 演示

8.  虚拟笔记本

一个能够翻页的虚拟的笔记本。

阅读更多 / 演示

9.  Bookflip

完全重建了Bookflip引擎,以便在现代浏览器中拥有更好的表现,也可用于IE8/9中。

阅读更多 / 演示

10.  Booklet

基于jQuery的翻页书布局插件。

阅读更多 / 演示

11.  jPageFlipper

完全基于HTML5的页面翻转插件。

阅读更多 / 演示

12.  jQuery Flipbook Slider

轻量级的jQuery翻页插件,可用于任何内容:文本、HTML、iframes、视频、Flash(SWF)等,你可以通过CSS很容易地对其进行自定义(如背景图片、字体、颜色等)。

阅读更多 / 演示

13.  灵感来自于Flipboard的翻页效果

阅读更多 / 演示

14.  jQuery Flippage

最初针对平板电脑开发,实现翻书效果。

阅读更多 / 演示

15.  WowBook

有2种不同的翻页效果,帮助你创建在线电子书。

阅读更多 / 演示

15 个最佳 jQuery 翻书效果插件的更多相关文章

  1. Unity3d:megaFierstext(翻书效果插件)

    附件中是一款翻书效果插件,由于附件上传大小限制,在下载完后,需要在megaFierstext_BHYF\Assets\Resources\Textures下添加图片精灵并修改属性为Texture,即可 ...

  2. 15个最佳jQuery的翻页书效果的例子

    在这里,你会发现15的jQuery的翻页书的插件,提供了良好的页面翻转的经验,并帮助创建类似书本的效果. jQuery的增添了一道亮丽的过渡到实际的页面在一本书或杂志HTML5. 1. BookBlo ...

  3. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  4. 基于CSS3新属性Animation及transform实现类似翻书效果

    注:本实例JS部分均以原生JS编写,不善用原生JS的,可用jQuery等对三方框架改写 先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0) 类似翻书效果,原本 ...

  5. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  6. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  7. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  8. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

  9. HTML5 3D翻书效果(双面效应)

    最后使用HTML5翻书效果达到测试,比较简单,它的升级版是 最后一个问题: 1)后,原来的页面连环画将成为一面镜子 2)无法实现双面翻书. 3)明显感觉页面似有近遮挡标志. 这次的升级版本号实现过程比 ...

随机推荐

  1. Nginx证书配置:tomcat证书jks文件转nginx证书.cet和key文件

    Nginx证书配置:tomcat证书jks文件转nginx证书.cet和key文件1.查看jks文件中的entry. keytool -list -keystore server.jks Enter ...

  2. 鸿蒙系统开源学习经验分享HarmonyOS[www.allharmonyos.com]

    分享鸿蒙系统开源知识,分享学习经验,分享鸿蒙系统开发经验 www.allharmonyos.com https://gitee.com/allharmonyos https://github.com/ ...

  3. js 数组相减 (一个数组去掉不符合条件的子数组)

    数组相减?我也希望将来在ES8或者更好js版本能带来数组之间相互运算的方法,但是现在不能,咱们只能靠已有的方法实现: var arr1 = [2,3,5,88,99,444,66],arr2 = [2 ...

  4. webStom常用快捷键备忘

    Ctrl+W 选中代码,连续按会有其他效果 Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/…/ ) Ctrl+X 删除行Ctrl+D 复制行 ctrl+shift+ 箭头 上下移动块代 ...

  5. 查询SQLSERVER执行过的SQL记录(历史查询记录)(转)

    原文链接:https://www.cnblogs.com/icycore/p/10493237.html 有的时候,需要知道近段时间SQLSERVER执行了什么语句,可以用下面的方法: SELECT ...

  6. 前端webpack & vue

    地址 : https://blog.csdn.net/jiang7701037

  7. wireshark自动化之tshark命令行

    tshark是wireshark安装目录下命令行工具 使用tshark可以通过自动化方式调用wireshark tshark -a duration:30 抓包30秒-w cap.cap 保存为cap ...

  8. StatusStrip 分类: C# 2015-07-23 11:58 2人阅读 评论(0) 收藏

    通过StatusStrip显示窗体状态栏 同时将状态栏分成三部分 居左边显示相关文字信息 中间空白显示 居右边显示时间信息 1.创建窗体及添加StatusStrip   默认StatusStrip名称 ...

  9. spring(六):spring中AOP的基本使用

    AOP:面向切面编程[底层使用动态代理实现],就是在运行期间动态的将某段代码切入到方法的指定位置进行运行的编程方式 基本使用 使用AOP功能需要引入spring的aop以及aspects相关包 < ...

  10. springboot的jar包部署

    由于springboot常用war包部署,改为cloud开发模式多端口情况下,部署反而不习惯 毕竟,war包要不要项目名访问都必须放在tomcat的root目录下 而此目录限制只能放置一个项目,并且登 ...