wowbook是一个jQuery插件,可以让你在网站中发布一本页面翻转效果超赞的书。

demo演示

基本页面

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wow_book</title>
<link rel="stylesheet" href="css/wow_book.css" type="text/css" />
</head>
<body>
<div id="mybook">
<div>书本封面</div>
<div>内容页面1</div>
<div>内容页面2</div>
<div>内容页面3</div>
<div>内容页面4</div>
<div>书本封底</div>
</div> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/wow_book.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#mybook').wowBook({
width : 600,
height : 500
});
});
</script>
</body>
</html>

使用实例

特征

可以渲染PDF文件,通过安装PDF.js库
单页模式
支持移动端,可响应的单页模式
封面比内容页大
带有字体图标的工具栏
目录
Lightbox
lazy loading
鼠标悬浮可显示翻页角
自动化的缩略图
支持从右向左翻页
2种逼真的翻页效果,包括精装的硬封面和普通纸翻页效果
支持所有主流浏览器
不需要flash
使用简单:使用HTML和CSS制作内容
响应式
支持触控(包括捏放大)
全屏
双页
无封面和封底
Deeplinking
链接可跳转到书中的任意页面和元素
缩放
支持浏览器的后退按钮
可循环的幻灯片效果
可配置的键盘导航
可配置的鼠标滚轮导航
API文档
在支持audio标签的浏览器上可以播放翻页声音
自动化的页码编号
可将页面缩略图转成sprite的工具

参考:
  官方文档

翻书插件:wowbook.js的更多相关文章

  1. 翻书插件:bookblock.js

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

  2. 移动端翻页插件dropload.js(支持Zepto和jQuery)

    一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服 ...

  3. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  4. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. turn.js实现翻书效果

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

  6. JQuery的turn.js实现翻书效果

    前言: hello大家好~好久没更博了……今天来和大家分享下JQ的turn.js,下面我先来简单介绍下我们今天的主角turn.js. Turn.js是一个JavaScript库,它集合了HTML5的所 ...

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

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

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

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

  9. 【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置

    jQuery插件 - Booklet翻书特效教程(一) 一般设置 本文由五月雨恋提供,转载请注明出处. 一.宽高(width/height) 1.自定义大小 $(function(){ // 自定义页 ...

随机推荐

  1. When it comes to intrusion analysis and forensics

    以下内容的出现可以追溯到一个发生在互联网的安全事件: Z公司遭受某种攻击,服务器上被植入了Linux DDOS木马,部分系统命令入ls遭替换,攻击者已经获得该服务器root权限: 影响更恶劣的是,连接 ...

  2. iOS空心圆下载进度指示器控件

    self.layer = [CAShapeLayer layer]; self.layer.frame = CGRectMake(, , , ); self.layer.position = self ...

  3. 使用WebRTC搭建前端视频聊天室——点对点通信篇

    WebRTC给我们带来了浏览器中的视频.音频聊天体验.但个人认为,它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道.在DataChannel之前,浏览器到浏览器的数据 ...

  4. android Activity介绍

    一般情况下,Android程序的流程都运行在activity中,activity具有自己的生命周期,由系统来控制.可以使用onSaveInstanceState()和onRestoreInstance ...

  5. Extjs5 tabs实例

    <%@ page language= "java" contentType ="text/html; charset=UTF-8"     pageEnc ...

  6. mysql 数据库引擎

    一.数据库引擎 数据库引擎是用于存储.处理和保护数据的核心服务.利用数据库引擎可控制访问权限并快速处理事务,从而满足企业内大多数需要处理大量数据的应用程序的要求. 使用数据库引擎创建用于联机事务处理或 ...

  7. python(一)

    python数学函数 abs(x) 返回数字的绝对值,如abs(-10) 返回 10 ceil(x) 返回数字的上入整数,如math.ceil(4.1) 返回 5 cmp(x, y) 如果 x < ...

  8. 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

    上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...

  9. git submodule初用

    git submodule主要是用于针对git项目中还存在git子模块的情况.在一般情况下,我们通过git clone 获取项目的时候会把项目中的所有信息都拿到.但是,如果相关中存在git子模块那么, ...

  10. 初识WebService

    一.什么是Web服务 Web服务是一种可以用来解决跨网络应用集成问题的开发模式,目的是保证不同平台的应用服务可以互操作 二.Web服务的三个核心 Soap: SOAP(Simple Object Ac ...