古卷轴平滑打开jQuery动画特效-特效详细页-国内领先的前端外包切图网站-切客网(qkhtml.com)

在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

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

分类:其它 更新时间:2017-07-16 浏览次数:1588

代码简介

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

浏览器兼容

IE8及以上

使用方法

1.引入jquery.min.js

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

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


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

3.为特效添加下面的CSS样式:

.content{
    position:relative;
    width:900px;
    height:460px;
    margin:40pxauto;
}
.l-pic-index{
    position:absolute;
    left:400px;
    top:1px;
    z-index:2;
    width:50px;
    height:460px;
    background:url("../images/j1.png")no-repeatright0;
}
.r-pic-index{
    position:absolute;
    right:400px;
    top:0;
    z-index:2;
    width:50px;
    *width:82px;
    height:460px;
    background:url("../images/j4.png")no-repeatleft0;
}
.l-bg-index{
    position:absolute;
    top:-3px;
    left:430px;
    z-index:1;
    width:25px;
    height:459px;
    background:url("../images/j2.png")right0no-repeat;
}
.r-bg-index{
    position:absolute;
    top:-4px;
    right:430px;
    z-index:1;
    width:25px;
    height:459px;
    background:url("../images/j3.png")00no-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:10px0044px;
    line-height:1.8;
    text-indent:30px;
}   
4.javascript

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

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!