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

});

});

【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置的更多相关文章

  1. jQuery+turn.js翻书、文档和杂志3种特效演示

    很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  2. 原创jquery插件treeTable(转)

    由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...

  3. winrt 上的翻书特效组件 源码分享 转载请说明

    http://blog.csdn.net/wangrenzhu2011/article/details/10207413 (转) [TemplatePart(Name = A_PARTNAME, Ty ...

  4. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  5. CSS3、jQuery实现3D翻书动画

    使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...

  6. jquery 插件之 点赞“+1” 特效

    一般用户点个赞后,都会有个 +1 的特效飘过,用户已经点过赞了,会有“已点过赞”的特效提示 在这里,我们写了一个点赞的插件 //扩展对象点赞插件.点赞特效 //用法:jQuery('.praisebt ...

  7. 原创jQuery插件之图片自适应

    效果图例如以下: 功能:使图片自适应居中位于容器内 限制:容器须要给定大小 用法: 1.引入jQuery.然后引入fitimg插件 2.给须要图片自适应的容器固定宽高 3.header .accoun ...

  8. 15 个最佳 jQuery 翻书效果插件

    本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1.  BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...

  9. Web 开发最有用的50款 jQuery 插件集锦——《综合篇》

    这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...

随机推荐

  1. C++之vector用法

    1.插入配对 std::vector<pair<int,int> > w; w.push_back(make_pair<int,int>(f,s) ); cout ...

  2. android百度地图中的地图缩放级别

    前期搭建百度地图的环境就不说了,网上一搜一大把,这里只讲地图的缩放,大神可以直接绕道 首先在类的内部初始化一个百度地图的对象 private BaiduMap mBaiduMap; 然后在OnCrea ...

  3. CSS3--幽灵按钮特效(实例)

    先预览效果 其中用到了CSS3的Transition属性:设置动画时间.效果:Transform属性:设置元素旋转.位移:box-sizing属性:以特定的方式定义某个区域的特定元素: 制作小三角方法 ...

  4. C/S打包(图文)

    最近几天接触到了关于C/S打包这块. 由于自己当时遇到了很多疑点,所以特意总结一下: 1.创建Project: 2.当创建Ok后会出现如下页面,左侧3个文件夹,第一个是放置程序文件(只需要放入.exe ...

  5. win8.1开启虚拟wifi

    1. 使用管理员身份打开cmd 2. 然后输入netsh wlan set hostednetwork mode=allow 3. 接着输入netsh wlan start hostednetwork ...

  6. Objective-C 【This is ARC】

    ------------------------------------------- ARC的概念及原理 (1)指针分类 强指针:默认情况下,所有的指针都是强指针,关键字strong 弱指针:_ _ ...

  7. 20150303--从SQL中获取数据的三级联动

    省市地区的三级联动,每变更一次所选地都需要提交,但是又不需要把整个页面提交,所以我们需要使用控件:UdataPanel.工具--AJAX扩展 还有ScriptManager,并要将其放在页面的最顶端. ...

  8. (转)RabbitMQ 安装和监控

    在Windows上安装Rabbit MQ 指南,最好的是这篇<Rabbit MQ Windows Installation guide>,其中还包括了使用.NET RabbitMQ.Cli ...

  9. Linux相关指令

    Linux相关指令 1.find文件搜索功能 find [目录列表] [匹配参数] [匹配标准] -name :按文件名称进行搜索 -group :按文件所属组进行搜索 -user :按文件拥有者进行 ...

  10. 数值积分NIntegrate中的具体算法

    数值积分方法很多,Mathematica中至提供了NIntegrate.具体算法可参照官方帮助. http://reference.wolfram.com/language/tutorial/NInt ...