图片/图形

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

创客主机


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

使用方法

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

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

HTML结构

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

  1. <div class="content">
  2.     <div class="l-pic-index"></div>
  3.     <div class="r-pic-index"></div>
  4.     <div class="l-bg-index"></div>
  5.     <div class="r-bg-index"></div>
  6.     <div class="main-index">
  7.         <p class="intro-text">
  8.             描述文本...
  9.         </p>
  10.     </div>
  11. </div>

CSS样式

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

  1. .content{
  2.     position: relative;
  3.     width: 900px;
  4.     height: 460px;
  5.     margin: 40px auto;
  6. }
  7. .l-pic-index{
  8.     position: absolute;
  9.     left: 400px;
  10.     top: 1px;
  11.     z-index:2;
  12.     width:50px;
  13.     height:460px;
  14.     background: url("../images/j1.png") no-repeat right 0;
  15. }
  16. .r-pic-index{
  17.     position: absolute;
  18.     right: 400px;
  19.     top: 0;
  20.     z-index: 2;
  21.     width:50px;
  22.     *width:82px;
  23.     height:460px;
  24.     background: url("../images/j4.png") no-repeat left 0;
  25. }
  26. .l-bg-index{
  27.     position: absolute;
  28.     top: -3px;
  29.     left: 430px;
  30.     z-index: 1;
  31.     width: 25px;
  32.     height: 459px;
  33.     background: url("../images/j2.png") right 0 no-repeat;
  34. }
  35. .r-bg-index{
  36.     position: absolute;
  37.     top:-4px;
  38.     right: 430px;
  39.     z-index: 1;
  40.     width: 25px;
  41.     height: 459px;
  42.     background: url("../images/j3.png") 0 0 no-repeat;
  43. }
  44. .main-index{
  45.     display: none;
  46.     overflow: hidden;
  47.     zoom:1;
  48.     position: absolute;
  49.     z-index: 5;
  50.     width:530px;
  51.     height:280px;
  52.     left:145px;
  53.     top:90px;
  54.     color: #2e2e2e;
  55. }
  56. .intro-text{
  57.     margin: 10px 0 0 44px;
  58.     line-height: 1.8;
  59.     text-indent: 30px;
  60. }

JavaScript

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

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

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!