翻书插件：wowbook.js

最新推荐文章于 2024-09-01 07:21:04 发布

weixin_34295316

最新推荐文章于 2024-09-01 07:21:04 发布

阅读量1.3k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/huliang56/p/6253496.html

版权

WowBook是一款基于jQuery的页面翻转效果插件，可用于创建在线翻页书籍。它支持PDF渲染、移动端响应式布局及触控操作等功能，并提供丰富的定制选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

demo演示

基本页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>wow_book</title>
 6     <link rel="stylesheet" href="css/wow_book.css" type="text/css" />
 7 </head>
 8 <body>
 9     <div id="mybook">
10         <div>书本封面</div>
11         <div>内容页面1</div>
12         <div>内容页面2</div>
13         <div>内容页面3</div>
14         <div>内容页面4</div>
15         <div>书本封底</div>
16     </div>
17     
18     <script type="text/javascript" src="js/jquery.min.js"></script>
19     <script type="text/javascript" src="js/wow_book.min.js"></script>
20     <script type="text/javascript">
21       $(document).ready(function() {
22         $('#mybook').wowBook({
23             width  : 600,
24             height : 500
25         });
26       });
27     </script>
28 </body>
29 </html>

使用实例

特征

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