最近在做古典音樂類的網頁，其中卷軸那塊要實現從中間慢慢展開的效果，研究了下，基本實現（個人技術有限，歡迎指導、指正）。
卷軸展開效果基本思路：
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); }); });
效果如下：
