古卷轴平滑打开jQuery动画特效

这是一款使用jquery animate动画制作的古卷轴平滑打开动画特效。该特效通过将一张完整的卷轴拆分到多个div中，然后通过jquery animate事件，配合不同的时间延迟，形成完整的卷轴打开动画。

使用方法

在页面中引入jquery.min.js文件。

<script type="text/javascript" src="path/to/jquery.min.js"></script>            
                

HTML结构

该古卷轴平滑打开动画特效的基本HMTL结构如下：

<div class="content">
    <div class="l-pic-index"></div>
    <div class="r-pic-index"></div>
    <div class="l-bg-index"></div>
    <div class="r-bg-index"></div>
    <div class="main-index">
        <p class="intro-text">
            描述文本...
        </p>
    </div>
</div>                    
                

CSS样式

为特效添加下面的CSS样式：

.content{
    position: relative;
    width: 900px;
    height: 460px;
    margin: 40px auto;
}
.l-pic-index{
    position: absolute;
    left: 400px;
    top: 1px;
    z-index:2;
    width:50px;
    height:460px;
    background: url("../images/j1.png") no-repeat right 0;
}
.r-pic-index{
    position: absolute;
    right: 400px;
    top: 0;
    z-index: 2;
    width:50px;
    *width:82px;
    height:460px;
    background: url("../images/j4.png") no-repeat left 0;
}
.l-bg-index{
    position: absolute;
    top: -3px;
    left: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("../images/j2.png") right 0 no-repeat;
}
.r-bg-index{
    position: absolute;
    top:-4px;
    right: 430px;
    z-index: 1;
    width: 25px;
    height: 459px;
    background: url("../images/j3.png") 0 0 no-repeat;
}
.main-index{
    display: none;
    overflow: hidden;
    zoom:1;
    position: absolute;
    z-index: 5;
    width:530px;
    height:280px;
    left:145px;
    top:90px;
    color: #2e2e2e;
}
.intro-text{
    margin: 10px 0 0 44px;
    line-height: 1.8;
    text-indent: 30px;
}                    
                

JavaScript

在页面DOM元素加载完毕之后，通过jquery animate事件来制作卷轴打开动画效果。

 $(document).ready(function(){
    //卷轴展开动画效果
    $(".l-pic-index").animate({'left':'95px','top':'-4px'},1300);
    $(".r-pic-index").animate({'right':'-23px','top':'-5px'},1450);
    $(".l-bg-index").animate({'width':'433px','left':'73px'},1500);
    $(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){
        $(".main-index").fadeIn(800);
    });
});