首页 > 特效插件 > 窗口特效 >  PFold:基于css3的立体折叠展开和收起代码正文

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


下载 提取码/密码:4q1j(点击复制密码) 预览