【原创】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 }); }); |
【原创】jQuery插件 - Booklet翻书特效教程(一) 一般设置的更多相关文章
- jQuery+turn.js翻书、文档和杂志3种特效演示
很好用的一款插件jQuery+turn.js翻书.文档和杂志3种特效演示 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 原创jquery插件treeTable(转)
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
- winrt 上的翻书特效组件 源码分享 转载请说明
http://blog.csdn.net/wangrenzhu2011/article/details/10207413 (转) [TemplatePart(Name = A_PARTNAME, Ty ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
- CSS3、jQuery实现3D翻书动画
使用CSS3 ,jQuery实现点击翻书动画效果,完整效果可在firefox中查看 HTML <div class="desktop"> <div class=& ...
- jquery 插件之 点赞“+1” 特效
一般用户点个赞后,都会有个 +1 的特效飘过,用户已经点过赞了,会有“已点过赞”的特效提示 在这里,我们写了一个点赞的插件 //扩展对象点赞插件.点赞特效 //用法:jQuery('.praisebt ...
- 原创jQuery插件之图片自适应
效果图例如以下: 功能:使图片自适应居中位于容器内 限制:容器须要给定大小 用法: 1.引入jQuery.然后引入fitimg插件 2.给须要图片自适应的容器固定宽高 3.header .accoun ...
- 15 个最佳 jQuery 翻书效果插件
本文为你带来15个非常实用的.实现类似翻书效果的jQuery插件,你可以很容易地整合到你的web应用中,提升用户体验. 1. BookBlock BookBlock可以将任何内容(如图像.文本)创建 ...
- Web 开发最有用的50款 jQuery 插件集锦——《综合篇》
这篇文章是<Web 开发最有用的50款 jQuery 插件集锦>系列的最后一篇,整个系列向大家分享了在网站开发中非常有帮助的 50 款 jQuery 插件,这些插件按用途主要有以下类别:网 ...
随机推荐
- C++之vector用法
1.插入配对 std::vector<pair<int,int> > w; w.push_back(make_pair<int,int>(f,s) ); cout ...
- android百度地图中的地图缩放级别
前期搭建百度地图的环境就不说了,网上一搜一大把,这里只讲地图的缩放,大神可以直接绕道 首先在类的内部初始化一个百度地图的对象 private BaiduMap mBaiduMap; 然后在OnCrea ...
- CSS3--幽灵按钮特效(实例)
先预览效果 其中用到了CSS3的Transition属性:设置动画时间.效果:Transform属性:设置元素旋转.位移:box-sizing属性:以特定的方式定义某个区域的特定元素: 制作小三角方法 ...
- C/S打包(图文)
最近几天接触到了关于C/S打包这块. 由于自己当时遇到了很多疑点,所以特意总结一下: 1.创建Project: 2.当创建Ok后会出现如下页面,左侧3个文件夹,第一个是放置程序文件(只需要放入.exe ...
- win8.1开启虚拟wifi
1. 使用管理员身份打开cmd 2. 然后输入netsh wlan set hostednetwork mode=allow 3. 接着输入netsh wlan start hostednetwork ...
- Objective-C 【This is ARC】
------------------------------------------- ARC的概念及原理 (1)指针分类 强指针:默认情况下,所有的指针都是强指针,关键字strong 弱指针:_ _ ...
- 20150303--从SQL中获取数据的三级联动
省市地区的三级联动,每变更一次所选地都需要提交,但是又不需要把整个页面提交,所以我们需要使用控件:UdataPanel.工具--AJAX扩展 还有ScriptManager,并要将其放在页面的最顶端. ...
- (转)RabbitMQ 安装和监控
在Windows上安装Rabbit MQ 指南,最好的是这篇<Rabbit MQ Windows Installation guide>,其中还包括了使用.NET RabbitMQ.Cli ...
- Linux相关指令
Linux相关指令 1.find文件搜索功能 find [目录列表] [匹配参数] [匹配标准] -name :按文件名称进行搜索 -group :按文件所属组进行搜索 -user :按文件拥有者进行 ...
- 数值积分NIntegrate中的具体算法
数值积分方法很多,Mathematica中至提供了NIntegrate.具体算法可参照官方帮助. http://reference.wolfram.com/language/tutorial/NInt ...