最近在做古典音乐类的网页，其中卷轴那块要实现从中间慢慢展开的效果，研究了下，基本实现（个人技术有限，欢迎指导、指正）。
卷轴展开效果基本思路：
1.切图：我是将一个画轴原图切成4个部分，两个轴单独切出来，剩下的主体部分均分切开。
2.html结构：
前面4个div的背景图即是我们切好的4张图
<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"> <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> <p class="intro-text"> 传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。 </p> </div> </div>
3.css（核心部分）
将两个轴定位在div的中间，紧贴但不重叠；
将两个主体部分也定位在中间，主体部分的宽度设置的要比轴的宽度小，这样初始状态时，轴才能将其完全覆盖。
4.js
比较简单，动画过程中改变轴的left，right值，主体的宽度和left值。
5.制作卷轴从中间向两侧展开的效果过程中遇到的问题:
1. 对卷轴的展开方式理解有误
从中间向两侧展开过程中,只有两侧的卷轴在相对反方向移动,中间的主体部分肉眼看应该是静止的。而我做出来的效果,左边的主体部分会随着卷轴的移动而感觉被展开。
2. 在展开过程中会有一条缝(线)出现
两种情况: 在移动过程中,开始和最后是正常,但在即将结束前会突然闪现一条缝,缝的位置有时在中间,有时在两侧。
原因:经过不断调试,发现是卷轴的宽度和主体的宽度导致的,将它们的宽度比实际宽度增加1px,该缝就不会出现。
3. 这个效果,主要就是css样式需要细调,因为只要有1px的差距,动画过程中可能就会出现缝隙。
最后，附上完整代码：
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>卷轴展开demo</title> <link rel="stylesheet" href="./css/index.css"> <script src="./js/jquery-1.11.3.min.js"></script> </head> <body> <!--content--> <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"> <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> <p class="intro-text"> 西南传统音乐是在以典河流域为中心的中原音乐和四域音乐以及外国音乐的交流融合之中形成发展起来的。 因此可以说，中原音乐、四域音乐、外国音乐是中国传统音乐的三大来源。 中原音乐指的是以黄河流域为中心发展起来的音乐。 在漫长的历史发展过程中，形成了以汉族为主体的黄河流域音乐文化。其中，殷商和西周时期的音乐文化具有代表意义。 除六代乐舞及其他多种乐舞的发展和整理，礼乐制度的阶级化和等级化，大司乐机构的设置，三分损益律的运用等， 对全代有重要影响之外，尤其在“八音”乐器分类中“琴”（七弦琴）及其音乐的出现，奠定了中国传统乐器与器乐的基本模式。 </p> </div> </div> </body> </html>
CSS
/*通用样式*/
body,ul,li,p,h1,h2,h3,h4,h5{ margin:0; padding:0; font-size:100%; } body{ font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif; font-size: 14px; background: #6f0b02; } button,input,select,textarea{ font-family: inherit; font-size: 100%; margin: 0; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } li{ list-style: none; } a{ text-decoration:none; color:#000; background: transparent; } a:focus{ outline: none; } img{ border:0; } .fl{ float: left; } .fr{ float: right; } .center{ width: 1000px; margin: 0 auto 0; } /*content*/ .content{ position: relative; margin: 40px auto 0; width: 1026px; height: 460px; } .l-pic-index{ position: absolute; left: 450px; top: 1px; z-index:2; width:79px; height:460px; background: url("../img/l-pic-index.png") no-repeat right 0; } .r-pic-index{ position: absolute; right: 450px; top: 0; z-index: 2; width:82px; *width:82px; height:460px; background: url("../img/r-pic-index.png") no-repeat left 0; } .l-bg-index{ position: absolute; top: 0; left: 485px; z-index: 1; width: 20px; height: 459px; background: url(../img/l-bg-index.png) right 0 no-repeat; } .r-bg-index{ position: absolute; top: 0; left: 504px; z-index: 1; width: 20px; height: 459px; background: url(../img/r-bg-index.png) 0 0 no-repeat; } .main-index{ display: none; overflow: hidden; zoom:1; position: absolute; z-index: 5; width:720px; height:280px; left:55px; top:90px; color: #2e2e2e; } .intro-text{ margin: 10px 0 0 44px; line-height: 1.8; text-indent: 30px; }
JS
$(document).ready(function(){ //卷轴展开效果 $(".l-pic-index").animate({'left':'8px'},1500); $(".r-pic-index").animate({'right':'9px'},1500); $(".l-bg-index").animate({'width':'432px','left':'73px'},1500); $(".r-bg-index").animate({'width':'432px','left':'504px'},1500,function(){ $(".main-index").fadeIn(800); }); });
效果如下：
