【原创】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="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<!-- <h3>Yay, Page 1!</h3> -->

</div>

<div rel="Chapter 2">

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data:images/1.png" width="100%" height="100%" alt="">

</div>

<div>

<img src="data: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

});

});