"Cicada Hall Study Notes"/the realization of accordion by using JavaScript/aidrich

Using JavaScript to achieve banner chart accordion effect

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2018-01-14

This article is mainly the use of pure JavaScript to achieve the accordion effect code, hoping to bring you some help, interested in small partners can make a reference.

First of all, let me give you a brief introduction of why the effect of the realization of what is called the accordion, maybe we have seen the accordion,

Yes, that's the effect, we implement an accordion on the Web page like this accordion, when a piece becomes wider, the other one narrows, then how to use JavaScript code to achieve such an effect?

Next I will show you the code I wrote, first of all, just show an accordion effect, the special effect is not very cool, simple just to express an accordion effect of a piece of code.

This string of code means that we have prepared an accordion frame, but also to install parts in the accordion, "Li" is a part, the common part of the class name is the length of the accordion, not the same class name is of course the position of the accordion blades. From left to right, small partners can compare the images above.

  <Divclass= "Accordion">            <ulclass= "Music">                <Liclass= "Grand Grand1"></Li>                <Liclass= "Grand Grand2"></Li>                <Liclass= "Grand Grand3"></Li>                <Liclass= "Grand Grand4"></Li>                                     </ul>      </Div>

Originally wanted to show you, but a look only know the parts have no color, parts are scattered all over the place, and then I put them together before you see it, a little wait Oh.

There are some corresponding code comments, not very perfect, many forgive

*{margin:0;padding:0;}HTML{width:100%;Height:100%;Overflow:Hidden;}Body{width:100%;Height:100%;}/*1. The margin and padding of the page are initialized to 0. Generally before the layout of the 2.html and the body width is 100%, because in the HTML page it is from the bottom of the search can also be written html,body{style} such a shorthand*/Li{List-style-type:None;}/*Here is a clear style that gives Li a common style without a list. OL and UL in front will have the style of the first-and-last model UL also have a style, here is clear the front of the number and the point of a role*/. Accordion{width:100%;Height:100%;background:#555050;position:Absolute; Left:0%;Top:0px;}/*give the outermost div a style background color, leaving it out of the document flow and the specified position*/. Music{width:100%;Height:100%;position:Absolute; Left:15%;Transform:skew ( -20deg); }/*ul is the same, give it a style, I want to feel good to see it tilted 20 degrees*/. Grand{transition:. 3s;width:18%;Height:100%;float: Left;}/*This is a style of public class name, let it float to the left, plus a transition effect*/. Grand1{background:#64EEE2;/*Position:absolute;*/}. Grand2{background:#9A62B4;}. Grand3{background:#65EE77;}. Grand4{background:#E65467;/*Position:absolute;*/}/*This is where we add our favorite colors to our accordion .*/

Well, I've assembled the parts, so let's see what they look like.

I'm just going to cut it off. Let's take a look at what the effect probably has a preliminary impression of it. In the CSS inside the code intention I also wrote a note, not very understanding of the small partners can follow the code do not understand to find relevant information to view

I do not waste everyone's time, the following code means we have to find an accordion for this accordion, JavaScript is a simple static page has its own soul

varGrand = Document.getelementsbyclassname ("Grand");//gets the number of class collections to Li//Console.log (grand.length)//Here you can view the length of Li 4 in the background of the page.       for(vari = 0;i<grand.length; i++){          //loop A variable i so I can get the subscript for all my Li's collectionsGrand[i].index =i; //assign the loop variable to [i]Grand[i].onmouseover=function(){            //put an array of Li lengths into an action function that moves the mouse            varj = This. Index; //The index function returns a value or a reference to a value in a table or range.                 //there are two forms of the Function index (): Array form and reference form                //The array form typically returns a numeric or numeric array, and the reference form typically returns a reference.                 //so the variable one J is to get the effect of the current function reference. Grand[j].style.width= "25%"grand[j].style.transition= ". 3s"; //move the mouse over to each Li when the style changes        }    //Change the width of the node when the mouse is moved in, or you can change the height of the node and add the transition effectGrand[i].onmouseout=function(){              //function Reference of the mouse leaving the node             varK = This. Index Grand[k].style.width= "18%"grand[k].style.transition= ". 3s"; //The main purpose here is to reset the cursor to the original style after the mouse is moved and the mouse leaves the node.         }    //This is mainly when the mouse leaves the node to reset the original width of the node, otherwise it will always be 25% width without restoring

Here I give you a look at the specific accordion:

After the comparison of the two pictures we also must see the gap between the mouse moved into which node, the relative node will become wider, the mouse moved into another node, the previous one will be changed back to the width of the current this will be correspondingly widened.

The above is the JavaScript code, in fact, the use of JavaScript inside a for loop to find our accordion (LI) Its length, so that the advantages of the public name is also reflected here, the small partners in the future when writing structural style must consider the layout of the problem. If the code is messy when you write the page, it's a lot of trouble to write JavaScript later, so you have to think about it again (because I've made this mistake before, I've been looking for the code for most of the day).
The other one, I'm just suggesting that the structural style behavior (html,css,javascript) be separated to write, so it will be easier to find that part.

This time I introduce to you a simple use of JavaScript to achieve the effect of the accordion is here, if you bring help I also feel very honored to help you.

If there are shortcomings also hope that Daniel's mercy, a lot of my advice to the younger brother, thank you for your time to watch my blog, I wish you a happy life!

"Cicada Hall Study Notes"/the realization of accordion by using JavaScript/aidrich