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

參數詳解