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

参数详解

PFold.js 折叠纸片

标签：

原文地址：http://www.cnblogs.com/niuboren/p/5771691.html