折叠纸片PFold.js

阅读更多

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

在线实例

效果一

效果二

效果三

使用方法

1.  id="uc-container" class="uc-container"> 
2.      class="uc-initial-content"> 
3.          class="clickme">点击我 
4.     

 

     class="uc-final-content"> 

         class="scrollwrap"> 

            

Dear Sucaihuo,

 

            

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 NOT 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 THANKS for that!

 class="signature">Yours, Barbara

 

        

 

         class="close">x 

    

 

复制

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; }	-

---

下载