前言
这是一个可以使得元素拥有像纸张一样的展开特效来显示更多内容的高度实验性jQuery插件。其中展开方向的步骤和数量都可以用参数指定。
简介
PFold是一个可以使得元素像纸张一样展开效果的高度实验性插件。一个元素使用3D效果来展开展示更多其他内容。这个效果的实现原理是，一个元素有许多层次的折叠，其中每展开一次。元素的高宽都成倍增加，所以可以模仿一张已折叠的纸张的展开效果。
有很多参数提供选择，如每个展开/折叠步骤的方向和步数。
对于不支持CSS 3D transforms 、 transitions的浏览器，这里会提供一个回调的方法，也就是直接显示大页面，没有过渡的效果。
Demo及源码
社招页效果
预览：http://xuanfengge.com/demo/201404/Pfold/
源码：https://github.com/xuanfeng/Pfold
浏览不同配置下的3个demos
Github源码地址
https://github.com/codrops/PFold
使用
使用该插件，需要的主题HTML结构如下：
|
1 2 3 4 5 6 7 8 |
<div id="uc-container" class="uc-container"> <div class="uc-initial-content"> <!-- initial content 折叠状态 --> </div> <div class="uc-final-content"> <!-- final content 展开状态 --> </div> </div> |
最后内容的大小将取决于初始内容的大小（在CSS中设定）、折叠的方向和折叠步骤的数量。例如，具有200px初始宽度和高度的元素，折叠方向为下、左，这2次折叠最终会产生一个400px宽高的元素。
插件调用方法
|
1 |
$( '#uc-container' ).pfold(); |
参数配置
下列参数选项可用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// the options $.PFold.defaults = { // 3D透视值 perspective value perspective : 1200, // 折叠/展开速度 each folding step's speed speed : 450, // 动画形式 each folding step's easing easing : 'linear', // 动画间隔 delay between each (un)folding step (ms) folddelay : 0, // 折叠/展开次数 number of times the element will fold folds : 2, // 展开方向 the direction of each unfolding step folddirection : ['right','top'], // 使用重叠来模拟阴影每个折叠步骤 use overlays to simulate a shadow for each folding step overlays : true, // 主容器中移动（平移），以保持其初始位置 the main container moves (translation) in order to keep its initial position centered : false, // 允许指定translation不同速度 allows us to specify a different speed for the container's translation // values range : [0 - 1] // if 0 the container jumps immediately to the final position (translation). // this is only valid if centered is true containerSpeedFactor : 1, // easing for the container transition // this is only valid if centered is true containerEasing : 'linear', // callbacks onEndFolding : function() { return false; }, onEndUnfolding : function() { return false; } }; |
demo页面的样式在大屏下有点问题，可忽略 – –
[可怜] 感谢分享~~~~~~~~~~~~~
[可怜] 感谢分享~~~~~~~~~~~~~
看到你招聘的那个效果做一半做不下去了正好看看
真棒@！
真棒@！
真知棒！
原来是这样做的呀，学习学习
插件实现的，会用就行咯
功能很赞 收藏了 以后可能要用到啊
创意，需要的时候可用到