`

折叠纸片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; } -

 

1
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    java中代码折叠插件com.cb.eclipse.folding,亲测好用

    java中代码折叠插件com.cb.eclipse.folding,com.cb.eclipse.folding_1.0.6.jar,使用方法百度,亲测可用,java中代码折叠插件com.cb.eclipse.folding,com.cb.eclipse.folding_1.0.6.jar,使用方法百度,亲测可用.java中...

    js折叠效果 folding.js

    javascript折叠效果,引入folding.js和folding.css就可以使用 例子: &lt;div id="1" data-scale=".15"&gt; ;"&gt; src="../orgReport/tree.html" frameborder=0 scrolling=NO&gt; ...

    3D纸片折叠动画.zip

    在这个案例中,JavaScript可能用于响应用户的点击事件,控制纸片的折叠和展开,或者添加更复杂的交互行为。 具体到压缩包内的文件"jiaoben181559",这可能是源代码文件,包含HTML、CSS和JavaScript代码。通过查看这...

    帖子折叠内容1.0503@X2.5.zip

    帖子折叠内容1.0503@X2.5.zip

    Node.js-dumper.js是一个更好更漂亮的Node.js应用程序变量检查器

    Node.js作为一个强大的服务器端JavaScript运行环境,为开发者提供了丰富的API和工具,使得构建Web应用变得轻而易举。在开发过程中,为了调试和诊断代码,我们经常需要查看应用程序中的变量状态。`dumper.js`就是这样...

    d3.js第七次人口普查可视化分析(含数据和源代码)

    d3.js是Data-Driven Documents的简称,是一个强大的JavaScript库,专用于创建动态、交互式的Web数据可视化。这次分析不仅包含最终的可视化结果,还附带了源代码,这意味着读者可以学习和理解实现这些可视化的方法。 ...

    易语言源码易语言窗口折叠关闭源码.rar

    易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码...

    jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜...

    jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜... jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜... jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜...

    ICSharpCode.TextEditor如何自定义代码折叠和高亮

    ICSharpCode.TextEditor是一款在.NET平台上广泛使用的开源代码编辑控件,它提供了丰富的文本编辑功能,包括代码高亮和折叠,使得开发人员可以方便地在应用程序中集成代码编辑功能。这款控件支持多种编程语言的语法...

    ace.js实现的编辑器

    ace.js编辑器还具备代码折叠功能,可以将代码块折叠起来,以便于查看和编辑大型代码文件。这减少了开发者的输入量,提高了代码的准确性和一致性。同时,ace.js还提供了自动完成功能,可以根据已输入的代码内容,智能...

    jquery.nestable.js示例

    `jQuery.nestable.js` 是一个用于创建可拖动、可折叠树形菜单的 jQuery 插件。这个插件在前端开发中非常有用,尤其是在构建需要层级结构展示的数据时,如目录、组织架构或者导航菜单等。下面我们将深入探讨 `jQuery....

    dTree.js下载+API文档.rar

    dTree.js是一款轻量级的JavaScript库,专门用于在网页中创建交互式的树形结构,如目录树或数据层级展示。这个压缩包包含了dTree.js的实现文件以及相关的API文档和示例,可以帮助开发者快速理解和使用这个库。 首先...

    行业文档-设计装置-一种硅胶纸片台灯.zip

    硅胶材质因其柔软、耐热、抗老化等特性,常用于创新产品设计中,而“纸片”一词暗示了灯具的轻薄和可折叠性,旨在创造一种既美观又节省空间的照明解决方案。 2. **工作原理**:台灯可能采用了LED光源,通过硅胶片...

    展开与折叠一..ppt

    展开与折叠一..ppt

    D3.js图表 组织结构

    D3 js 支持画布整体缩放移动 可展开收缩节点,后续可扩展为: * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 * 支持双击...

    jQuery-Treeview.js v1.4 官方版.rar

    **jQuery Treeview.js 插件详解** jQuery Treeview.js 是一款功能强大的JavaScript库,用于将HTML列表转换为可交互的树形结构。这个插件基于流行的jQuery框架,为用户提供了一种简便的方式来展示层次化的数据,如...

    TreeGrid.js 表格树插件

    TreeGrid.js是一款强大的基于jQuery的表格树插件,它为数据展示提供了一种灵活且具有层次结构的方式。这款插件允许用户将数据以表格的形式展现,并且每行数据可以展开成一个子节点,形成树状结构,使得复杂的数据...

    ace.js 好用的web代码编辑器,支持多种语言js,python,java, php等

    这段代码首先引入了Ace.js库和样式文件,然后创建了一个ID为`editor`的div元素,最后通过JavaScript初始化编辑器并设置其模式为JavaScript。 4. **标签解析** - "ace":指代Ace.js编辑器本身,它是这个压缩包的...

    易语言窗口折叠关闭源码.rar

    易语言窗口折叠关闭源码.rar

    g6-tree_javascript树_farmmrp_g6.js修改key_g6生态树使用_g6.js_源码

    本案例涉及的是在JavaScript环境中使用G6构建一个可折叠的树状图实例,特别是针对"farmmrp"(可能代表某种业务场景或管理系统)的应用。我们将深入探讨G6.js的关键知识点以及如何修改其key值,以及如何利用提供的...

Global site tag (gtag.js) - Google Analytics