折叠纸片PFold.js

PFold.js是一款折叠纸片插件,支持定义折叠纸牌数量、折叠动画效果、折叠方向，而且还支持折叠结束后回调方法。

在线实例

效果一

效果二

效果三

使用方法

1. <div id="uc-container" class="uc-container">
2. <div class="uc-initial-content">
3. <span class="clickme">点击我</span>
4. </div>
5. <div class="uc-final-content">
6. <div class="scrollwrap">
7. <h3>Dear Sucaihuo,</h3>
8. <p>I just wanted to let you know that you left the garage door open and all the monkeys could get away! Great job! How often did I tell you <span>NOT</span> to forget to close it. On top of all that you also left the gate open and now they are literally in the wild! Anyway, just wated to say <span>THANKS</span> for that!</p><p class="signature">Yours, Barbara</p>
9. </div>
10. <span class="close">x</span>
11. </div>
12. </div>

复制

1. var $container = $('#uc-container'),
2. pfold = $('#uc-container').pfold({
3. easing: 'ease-in-out',
4. folds: 3,
5. folddirection: ['left', 'bottom', 'right']
6. });
7. $container.find('span.clickme').on('click', function() {
8. pfold.unfold();
9. }).end().find('span.close').on('click', function() {
10. pfold.fold();
11. });

复制

参数详解

参数	描述	默认值
perspective	透视度	1200
speed	打开纸卡速度	450
easing	动画效果	linear
folddelay	折叠延迟时间	0
folds	折叠次数	2
folddirection	折叠方向顺序	['right','top']
overlays	遮盖物	true
centered	是否居中	false
containerSpeedFactor	[0 - 1] specify a different speed for the container's translation	1
containerEasing	easing for the container transition this is only valid if centered is true	linear
方法Method
onEndFolding	onEndFolding : function() { return false; }	-
onEndUnfolding	onEndUnfolding : function() { return false; }	-

---

下载