jBooklet是一款简单的网页翻书jQuery特效插件。该翻书特效插件实现了左右翻页的基本功能,并提供了一个默认的样式。你可以通过CSS文件来修改默认样式,生成更加好看的翻页效果。
使用方法
该插件依赖于jQuery,jQuery UI为可选项,还依赖于jquery.easing
插件,使用时要先引入必须的依赖文件。
<link href="booklet/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" /> <!-- jQuery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script> window.jQuery || document.write('<script src="booklet/jquery-2.1.0.min.js"><\/script>') </script> <!-- jQuery UI (optional) --> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script> window.jQuery.ui || document.write('<script src="booklet/jquery-ui-1.10.4.custom.min.js"><\/script>') </script> <!-- Booklet --> <script src="booklet/jquery.easing.1.3.js"></script> <script src="booklet/jquery.booklet.latest.min.js"></script>
HTML结构
该翻书特效的HTML结构使用的是嵌套div
的结构。包裹div
上要设置一个ID或class,在包裹div
下的直接子元素会被插件识别为一个页面,在它里面可以放置页面的内容:
<div id="mybook"> <div> <h3>Yay, Page 1!</h3> </div> <div> <h3>Yay, Page 2!</h3> </div> <div> <h3>Yay, Page 3!</h3> </div> <div> <h3>Yay, Page 4!</h3> </div> </div>
初始化插件
在完成上面的步骤之后,就可以在页面加载完成之后调用该翻书特效插件。你可以使用相同的class或选择器来初始化多个booklet实例对象:
$(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with a class $('.mycustombooks').booklet(); });
定制CSS样式
当booklet被创建之后,会生成以下的基本HTML结构,每个div
中都带有特定的class,通过修改这些class的内容,你可以自定义出自己的翻书效果样式。
<div class="booklet" id="mybook"> <div class="b-page b-page-0 b-p1"> <div class="b-wrap b-wrap-left"> ... </div> </div> <div class="b-page b-page-1 b-p2"> <div class="b-wrap b-wrap-right"> ... </div> </div> <div class="b-page b-page-2 b-p3"> <div class="b-wrap b-wrap-left"> ... </div> </div> <div class="b-page b-page-3 b-p4"> <div class="b-wrap b-wrap-right"> ... </div> </div> <div class="b-controls"> ... </div> </div>
所有的class都可以在jquery.jbooklet.css
文件中找到。
- .booklet:booklet的包裹元素。这个class会被添加到你指定的booklet元素上。
- .b-page:每一个页面的包裹元素。
.b-page-0
指定页面的序号,从0开始计数。其它的class(.b-pN, .b-p0, .b-p1, .b-p2, .b-p3, .b-p4
)用于翻页动画。 - .b-wrap:每一个页面的内部容器。
.b-wrap-left
或.b-wrap-right
用于指定页面是在左边还是右边。 - .b-page-cover:书的封面。当使用
closed
和covers
选项时,该class会被添加到第一页和最后一页的.b-wrap
上。
配置参数
General
- name:类型:
string
,默认值:null。显示在浏览器标题上的booklet名称。 - width:类型:
Number, String
。默认值:600。booklet的宽度,可以是一个数值,或一个CSS字符串("600px"),或一个百分比字符串(“50%”)。 - height:类型:
Number, String
。默认值:400。booklet的高度,规则同上。 - speed:类型:
Number
。默认值:1000。书本翻页的速度。单位毫秒。 - direction:类型:
String
。默认值:"LTR"。书本翻页的方向。可以设置为“RTL”。 - startingPage:类型:
Number
。默认值:0。书本页面的序号,从0开始。 - easing:类型:
String
。默认值:"easeInOutQuad"。用于完成翻页效果的easing方法名称。easing参数可以参考Easing Plugin。 - easeIn:类型:
String
。默认值:"easeInQuad"。页面前半部过渡动画的easing方法。 - easeOut:类型:
String
。默认值:"easeOutQuad"。页面后半部过渡动画的easing方法。
Closed / Covers
- closed:类型:
Boolean
。默认值:false。书本关闭是的外观。会添加带class.b-page-empty
的空页到书本的第一页和最后一页。 - closedFrontTitle:类型:
String
。默认值:"Beginning"。Used with closed, menu and pageSelector options. Determines title of blank starting page。 - closedFrontChapter:类型:
String
。默认值:"Beginning of Book"。Used with closed, menu and chapterSelector options. Determines chapter name of blank starting page. - closedBackTitle:类型:
String
。默认值:"End"。用于closed、menu和pageSelector参数。确定空白结束页标题。 - closedBackChapter:类型:
String
。默认值:"End of Book"。用于closed、menu和pageSelector参数。确定章节的名称。 - covers:类型:
Boolean
。默认值:false。用于closed参数。将第一页和最后一页作为封面,并为页面内容添加class.b-page-cover
。 - autoCenter:类型:
Boolean
。默认值:false。用于closed参数。当booklet关闭时使它居中定位。
该翻书效果的更多参数和方法及事件请参看:http://builtbywill.com/code/booklet/documentation