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

使用方法

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

HTML结构

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

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

});

});