【原创】jQuery插件 - Booklet翻书特效教程（一） 一般设置

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 }); });