jQuery插件 - Booklet翻书特效教程（一）
一般设置
本文由五月雨恋提供，转载请注明出处。
一、宽高（width/height）
1、自定义大小
| $(function(){ // 自定义页面大小 单位默认px 注意不要带单位px! $('#mybook1').booklet({ width: 600,// 不要带单位px! height: 200// 不要带单位px! }); }); |
2、百分比
| $(function(){ // 自定义页面大小 使用百分比 $('#mybook2').booklet({ width: '100%',// 注意带单引号！ height: 600 }); }); |
二、翻页速度（Speed）
自定义翻页速度
| $(function(){ // 自定义翻页速度 单位ms $('#mybook1').booklet({ speed: 600,// 设置600ms }); }); |
三、起始页
自定义起始页
| $(function(){ // 自定义起始页 $('#mybook1').booklet({ startingPage: 3,// 设置600ms }); }); |
四、阅读方向（Readding Direction）
方向默认设置为左到右。
| $(function(){ // 方向默认设置为左到右 $('#mybook1').booklet({ direction: 'LTR',// 设置为左到右 }); }); |
或者,您可以修改右到左的方向。如果你使用这个选项,你可能需要使用自己的CSS对文本设置右对齐。
| $(function(){ // 修改右到左的方向 $('#mybook2').booklet({ direction: 'RTL',// 修改右到左的方向 }); }); |
五、页面填充（Page Padding）
Booklet's 默认页面padding设置为10px
| $(function(){ // 默认页面padding设置为10px $('#mybook1').booklet(); }); |
如果你希望得到不同的效果还可以修改这个数量。
| $(function(){ // padding设置为0 $('#mybook2').booklet({ pagePadding:0 }); }); |
六、页码（Page Numbers）
Booklet's 默认设置有页码。
| $(function(){ // 默认设置有页码 $('#mybook1').booklet(); }); |
你也可以不显示页码。
| $(function(){ // 你也可以不显示页码 $('#mybook2').booklet({ pageNumbers: false }); }); |
七、自定义阴影（Custom Shadows）
你可以禁用页阴影动画。要使用不同的图片,所有可用的选项，参照文档。
| $(function(){ // 不显示阴影 $('#mybook2').booklet({ shadows: false }); }); |
八、关闭书本（Closed Book）
关闭选项设置书本关闭后的外观,在开始和结束添加空白页。
| $(function(){ // 关闭书本 $('#mybook2').booklet({ closed: true }); }); |
1、书本关闭后自动居中
如果你希望书本关闭后居中，使用autoCenter 选项。
| $(function(){ // 关闭书本后居中显示 $('#mybook2').booklet({ closed: true, autoCenter: true }); }); |
2、关闭书本与封面
使用Closed 选项时,您还可以设置你的第一页和最后一页为封面,（如果合适）给他们添加一个独特的样式(.b-page-cover)和不显示页码。Front Cover
| $(function(){ // 设置封面 $('#mybook3').booklet({ closed: true, autoCenter: true, covers: true }); }); |
Back Cover
3、关闭书本和右向左翻
| $(function(){ // 设置封面和右往左翻的书 $('#mybook4').booklet({ closed: true,// 关闭书本 autoCenter: true,// 关闭书本后居中显示 covers: true,// 设置封面 direction: 'RTL'//右往左翻的书 }); }); |
over
4、关闭书本与章节&页面选择
你始终可以给关闭的书本使用chapterSelector和pageSelector。 要在书本的开始前和结束后添加章节名称和页面标题，详细参照文档。.
| <h1>封面和章节名称&页面标题</h1> <div id="custom-menu"></div> <div id="mybook5"> <div> <h3>Yay, Page 1!</h3> </div> <div rel="Chapter 1"> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <!-- <h3>Yay, Page 1!</h3> --> </div> <div rel="Chapter 2"> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <img src="images/1.png" width="100%" height="100%" alt=""> </div> <div> <!-- <h3>Yay, Page 1!</h3> --> </div> </div> |
| $(function(){ // 封面和章节&页面标题 $('#mybook5').booklet({ closed: true,// 关闭书本 autoCenter: true,// 关闭书本后居中显示 covers: true,// 设置封面 menu: '#custom-menu', pageSelector: true, chapterSelector: true }); }); |