你的位置:首页 > Java教程

[Java教程]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 translation1
containerEasingeasing for the container transition this is only valid if centered is truelinear

方法Method

onEndFoldingonEndFolding : function() { return false; }-
onEndUnfoldingonEndUnfolding : function() { return false; }-

下载