PFold：基于css3的立体折叠展开和收起代码

基于CSS3+jQuery+html5的PFold立体折叠展开和收起的代码，多种效果，如点击后，在原地展开，从一个小小的取域，展开四五倍，展示更多内容，或者从展开位置偏移，以便于展开后的中心点和展开前的中心点重合。
一共提供了三种效果，这里只简单介绍第一种用法，其他效果可在下载后的demo中查看：
1、引入css

<link rel="stylesheet" type="text/css" href="css/5imoban.net.css" />
<link rel="stylesheet" type="text/css" href="css/pfold.css" />

2、在页面中加入下面的html

<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
        <!--这里是展开前的内容-->
    </div>
    <div class="uc-final-content">
        <div class="scrollwrap">
            <!--这里是展开后的内容-->
        </div>
        <span class="close">x</span>
    </div>
</div>

3、引入js和jQuery

<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.pfold.js"></script>

4、调用

$(function() {
    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();
    });
});