PFold.js是一款折叠纸片插件,支持定义折叠纸牌数量、折叠动画效果、折叠方向,而且还支持折叠结束后回调方法。
在线实例
效果一 | 效果二 | 效果三 |
使用方法
- <div id="uc-container" class="uc-container">
- <div class="uc-initial-content">
- <span class="clickme">点击我</span>
- </div>
- <div class="uc-final-content">
- <div class="scrollwrap">
- <h3>Dear Sucaihuo,</h3>
- <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>
- </div>
- <span class="close">x</span>
- </div>
- </div>
复制
- var $container = $('#uc-container'),
- pfold = $('#uc-container').pfold({
- easing: 'ease-in-out',
- folds: 3,
- folddirection: ['left', 'bottom', 'right']
- });
- $container.find('span.clickme').on('click', function() {
- pfold.unfold();
- }).end().find('span.close').on('click', function() {
- pfold.fold();
- });
复制
参数详解
参数 | 描述 | 默认值 |
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; } | - |
相关推荐
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中...
javascript折叠效果,引入folding.js和folding.css就可以使用 例子: <div id="1" data-scale=".15"> ;"> src="../orgReport/tree.html" frameborder=0 scrolling=NO> ...
在这个案例中,JavaScript可能用于响应用户的点击事件,控制纸片的折叠和展开,或者添加更复杂的交互行为。 具体到压缩包内的文件"jiaoben181559",这可能是源代码文件,包含HTML、CSS和JavaScript代码。通过查看这...
帖子折叠内容1.0503@X2.5.zip
Node.js作为一个强大的服务器端JavaScript运行环境,为开发者提供了丰富的API和工具,使得构建Web应用变得轻而易举。在开发过程中,为了调试和诊断代码,我们经常需要查看应用程序中的变量状态。`dumper.js`就是这样...
d3.js是Data-Driven Documents的简称,是一个强大的JavaScript库,专用于创建动态、交互式的Web数据可视化。这次分析不仅包含最终的可视化结果,还附带了源代码,这意味着读者可以学习和理解实现这些可视化的方法。 ...
易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码易语言窗口折叠关闭源码.rar 易语言源码...
jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜... jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜... jquery 菜单特效简单的div展开收缩菜单类似手风琴的折叠菜...
ICSharpCode.TextEditor是一款在.NET平台上广泛使用的开源代码编辑控件,它提供了丰富的文本编辑功能,包括代码高亮和折叠,使得开发人员可以方便地在应用程序中集成代码编辑功能。这款控件支持多种编程语言的语法...
ace.js编辑器还具备代码折叠功能,可以将代码块折叠起来,以便于查看和编辑大型代码文件。这减少了开发者的输入量,提高了代码的准确性和一致性。同时,ace.js还提供了自动完成功能,可以根据已输入的代码内容,智能...
`jQuery.nestable.js` 是一个用于创建可拖动、可折叠树形菜单的 jQuery 插件。这个插件在前端开发中非常有用,尤其是在构建需要层级结构展示的数据时,如目录、组织架构或者导航菜单等。下面我们将深入探讨 `jQuery....
dTree.js是一款轻量级的JavaScript库,专门用于在网页中创建交互式的树形结构,如目录树或数据层级展示。这个压缩包包含了dTree.js的实现文件以及相关的API文档和示例,可以帮助开发者快速理解和使用这个库。 首先...
硅胶材质因其柔软、耐热、抗老化等特性,常用于创新产品设计中,而“纸片”一词暗示了灯具的轻薄和可折叠性,旨在创造一种既美观又节省空间的照明解决方案。 2. **工作原理**:台灯可能采用了LED光源,通过硅胶片...
展开与折叠一..ppt
D3 js 支持画布整体缩放移动 可展开收缩节点,后续可扩展为: * 支持节点拖拽 * 支持节点拖拽并固定位置 * 支持鼠标浮到节点显示节点信息 * 支持双击节点隐藏不相关的节点及线 可以累加双击的节点 * 支持双击...
**jQuery Treeview.js 插件详解** jQuery Treeview.js 是一款功能强大的JavaScript库,用于将HTML列表转换为可交互的树形结构。这个插件基于流行的jQuery框架,为用户提供了一种简便的方式来展示层次化的数据,如...
TreeGrid.js是一款强大的基于jQuery的表格树插件,它为数据展示提供了一种灵活且具有层次结构的方式。这款插件允许用户将数据以表格的形式展现,并且每行数据可以展开成一个子节点,形成树状结构,使得复杂的数据...
这段代码首先引入了Ace.js库和样式文件,然后创建了一个ID为`editor`的div元素,最后通过JavaScript初始化编辑器并设置其模式为JavaScript。 4. **标签解析** - "ace":指代Ace.js编辑器本身,它是这个压缩包的...
易语言窗口折叠关闭源码.rar
本案例涉及的是在JavaScript环境中使用G6构建一个可折叠的树状图实例,特别是针对"farmmrp"(可能代表某种业务场景或管理系统)的应用。我们将深入探讨G6.js的关键知识点以及如何修改其key值,以及如何利用提供的...