折叠纸片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.  
8. $container.find('span.clickme').on('click', function() { 
9.     pfold.unfold(); 
10. }).end().find('span.close').on('click', function() { 
11.     pfold.fold(); 
12. });

复制

参数详解

参数	描述	默认值
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; }	-

---

下载

 

转载于:https://www.cnblogs.com/niuboren/p/6404179.html