【知了堂學習筆記】/利用JavaScript對手風琴的實現/Aidrich

標籤：實現   str   log   一點   還原   返回   htm   one   後台   

　　利用JavaScript實現banner圖手風琴效果

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2018-01-14

這一篇文章主要是利用純JavaScript實現手風琴效果代碼,希望能給您帶來一定的協助,感興趣的小夥伴可以進行一個參考。

首先我給大家先介紹一下為什麼實現的效果為什麼叫做手風琴吧，可能大家都見過手風琴,

沒錯，就是這樣的一個效果，我們在網頁上實現一個手風琴的效果就像這個手風琴一樣,在一塊變寬的時候,另外一塊會變窄，那麼怎麼用JavaScript代碼去實現這樣的一個效果呢？

接下來我將為大家呈現出我所寫的代碼,先說明只是呈現出一個手風琴效果，特效呢不是很酷炫，單純的只是表達出一個手風琴效果的一段代碼。

 

 

 

這一串代碼的意思就是 我們準備好一個手風琴的架構,也要在手風琴裡面安裝零件,“li”就是一個零件組成，類名共同的部分就是手風琴的長度，不一樣的類名當然就是手風琴扇葉的位置啦。從左至右的位置，小夥伴們可以對照上面的圖片進行對比。

  <div class="accordion">            <ul class="music">                <li class="grand grand1"></li>                <li class="grand grand2"></li>                <li class="grand grand3"></li>                <li class="grand grand4"></li>                                     </ul>      </div>

 

 

本來想給大家看看的，不過一看才知道零件還沒有顏色，零件也是散落的一地到處都是，接下來我把它們先拼裝起來再給大家看吧，稍等哦。 

 這裡面還有一些相應的一個代碼注釋，不是很完善，多見諒

*{    margin: 0;    padding: 0;}html{    width: 100%;    height: 100%;    overflow: hidden;}body{    width: 100%;    height: 100%;}/* 1.初始化網頁的margin和padding為0.一般在布局前都會這樣   2.html和body的寬度高度都為100%，因為在html網頁它是從下往上找的    也可以寫成html，body{樣式}這樣的一個簡寫 */li {    list-style-type: none;}/* 這裡是給li無需列表的一個公用樣式的一個清楚樣式。ol和ul前面都會有1，2，3   的樣式ul也有·的一個樣式，這裡就是清楚前面的數字和點的一個作用 */.accordion{    width: 100%;    height: 100%;    background: #555050;    position: absolute;    left: 0%;    top: 0px;}/* 給最外圍div一個樣式背景顏色，讓它脫離文檔流和規定位置 */.music{    width: 100%;    height: 100%;    position: absolute;    left:15%;    transform: skew(-20deg); }   /* ul也是一樣的，給它一個樣式，我為了覺得好看一點 讓它傾斜了20度 */.grand{    transition: .3s;    width: 18%;    height: 100%;    float: left;}/* 這個是公用類名的一個樣式，讓它浮動往左邊，加上一個過渡效果 */.grand1{    background: #64EEE2;    /* position: absolute; */}.grand2{    background: #9A62B4;}.grand3{    background: #65EE77;}.grand4{    background: #E65467;    /* position: absolute; */}/* 這裡就是為我們的手風琴添加上自己喜歡的顏色啦 */

 

 

 

好了，零件我拼裝好了，先給大家加看看是什麼樣子的吧

 

我就截了一部分給大家先看一下是什麼效果大概有了一個初步的印象了吧。在CSS裡面的代碼用意我也寫上了注釋,不是很懂的小夥伴們可以按照不懂的代碼去尋找相關的資料進行查看

我也不浪費大家的時間了，下面的代碼意思就是咱們要為這個手風琴找一位手風琴手了，JavaScript就是是一個單純的靜態頁面擁有自己的靈魂

var grand = document.getElementsByClassName("grand");//擷取到li的class集合數// console.log(grand.length)//這裡就可以在頁面後台查看到li的長度為4。     for(var i = 0;i<grand.length; i++){          //  迴圈一個變數I   這樣就可以擷取到我li的所有集合的下標        grand[i].index = i;          //把迴圈變數賦值給[i]        grand[i].onmouseover=function(){            //  把li長度的數組套入一個滑鼠移入時的操作函數裡面            var j = this.index;                //  index函數是返回表或地區中的值或對值的引用。                //  函數index()有兩種形式：數組形式和引用形式                //  數組形式通常返回數值或數值數組；引用形式通常返回引用。                //  所以變數個這個 J 就是為了擷取到當前這個函數引用的效果。            grand[j].style.width="25%"              grand[j].style.transition = ".3s";            // 滑鼠移入到每一個li的時候所改變的樣式        }    //滑鼠移入的時候改變節點的寬度,也可以改變節點的高度 並且加上過渡效果         grand[i].onmouseout=function(){              // 滑鼠離開節點的函數引用             var k = this.index            grand[k].style.width="18%"            grand[k].style.transition = ".3s";            //這裡主要就是為了在滑鼠移入改變樣式後 滑鼠離開節點重設回本來的樣式         }    //  這裡主要是滑鼠離開節點的時候重新重設節點的原本寬度  不然的話就一直是25%的寬度 而不會還原

  在這裡我給大家看看具體手風琴的：

經過這兩張圖片的對比大家也肯定看到了之間的差距，滑鼠移入哪一個節點，相對的節點就會變的更寬，滑鼠移入另外一個節點的時候，前一個就會變回之前的寬度,當前的這個也會相應的變寬了。

 

 

   　　以上是JavaScript的代碼，其實就是利用JavaScript裡面一個for迴圈找到咱們手風琴（li）它的長度，所以說公用名字的長處也體現在這裡了，各位小夥伴在以後寫結構樣式的時候一定要考慮好布局問題。如果在你寫一遍網頁頁面的時候代碼亂了，到後來要寫JavaScript的時候就很很麻煩，所以這些東西大家也要考慮好了再寫（因為我以前也犯過這種錯誤，找代碼找了大半天）。
      另外一個呢就我就是建議大家把結構樣式行為（html，css，JavaScript）分開了去寫，這樣要找那一部分也會更簡單一些。

這次我給大家介紹的一個簡單的利用JavaScript實現手風琴的效果就到這裡了,如果給您帶來了協助我也感到很榮幸的協助到您了。

如果還有不足之處還望大牛們手下留情，多多給小弟我提出意見，謝謝大家在付出自己時間觀看我的部落格，祝您生活愉快！

 

【知了堂學習筆記】/利用JavaScript對手風琴的實現/Aidrich