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%" >

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div rel="Chapter 2">

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</div>

<div>

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

</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

});

});

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。