Cool JS Accordion effect _javascript Skills

You must have used bookmarks, and must have bookmarked your books, so have you ever seen a bookmark-style navigation? You must have seen the accordion, and you must know its shape changes when you play the accordion, have you ever seen an accordion navigation? If not, please look down:

Previous words:

This blog first through JavaScript to do a simple accordion effect, so that we have a certain understanding of the accordion effect; then, we change jquery to do a similar accordion effect. The previous two examples are very simple, next to enlarge the recruit, I would like to use JQ or native JS to do similar to Taobao using the accordion effect. Continue to go back to the bookmark question, since JQ and JS can achieve so cool effect, we use CSS3 can make accordion effect of the bookmark it?

Use JavaScript to make a simple accordion effect:
not much to say, we first code:

<! DOCTYPE html>
 
 

Effect:

Analysis: In the case of not using JS, we can only change the width of p to imitate the accordion effect, and then we ignore the impact of human factors, so that when the mouse passes through each p, the width of the p changed.

Here we know that to change the width of p, then it's easy, and we'll get the results we want with the previous approach to JavaScript animation (click: JavaScript animation related). The reference code is as follows:

function accordion () {
 var Div = document.getElementById (' C ');
 var divs = div.getelementsbytagname (' P ');
 var i = 0;
 var t = null;
 for (i = 0; i < divs.length; i++) {
  divs[i].index = i;
  Divs[i].onmouseover = function () {
   var index = this.index;
   if (t) {
    clearinterval (t);
   }
   t = setinterval (function () {
    var iwidth =;
    for (i = 0; i < divs.length i++) {
     if (index!= divs[i].index) {
      var ispeed = (20-divs[i].offsetwidth)/5;< C17/>ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (ispeed);
      Divs[i].style.width = divs[i].offsetwidth + ispeed + ' px ';
      Iwidth-= Divs[i].offsetwidth;;
     };
    Divs[index].style.width = iwidth + ' px ';
};} accordion ();

The above code does not explain, after the code runs the result clicks the URL: http://sandbox.runjs.cn/show/daapxxo9 to view.

Use jquery to do similar accordion effects:

Before the effect is not feel very simple, we add a little bit of difficulty, the following requirements:

1, change the background color of the front to picture

2. Add text

3, with jquery implementation

To complete our HTML code first:

<div class= "pic" > <ul> <li class= "Pic1" > <a href= "javascript:;" > <div class= "txt" > <p class= "P1" > Author: Chen Wu </p> <p class= "P2" > Effect: Accordion effect </p&gt
      ; </div> </a> </li> <li class= "Pic2" > <a href= "javascript:;" > <div class= "txt" > <p class= "P1" > Author: Chen Wu </p> <p class= "P2" > Effect: Accordion effect </p&gt
      ; </div> </a> </li> <li class= "pic3" > <a href= "javascript:;" > <div class= "txt" > <p class= "P1" > Author: Chen Wu </p> <p class= "P2" > Effect: Accordion effect </p&gt
      ; </div> </a> </li> <li class= "Pic4" > <a href= "javascript:;" > <div class= "txt" > <p class= "P1" > Author: Chen Wu </p> <p class= "P2" > Effect: Accordion effect </p&gt
      ; </div> </a> </li> </ul> </div>
 

Note: <a href= "javascript:;" > means the default action of shielding a label

Profiling styles: Only the last picture shows the original size, the rest is 100px, and then changes our style to the following code:

   * {margin:0;
    padding:0;
    font-family: "Microsoft Ya Hei";
   List-style-type:none;
   Body {background-color: #000;
   } a {text-decoration:none;
    Header, footer {width:1000px;
    height:40px;
    margin:0 Auto;
    Text-align:center;
    padding:20px 0;
   Color: #fff;
   Header p {text-align:right;
    }. pic {width:1000px;
    height:320px;
    margin-top:60px;
    margin:0 Auto;
    border:5px solid Aqua;
    border-radius:5px;
   Overflow:hidden;
   }. Pic1 {Background:url (images/1.jpg) no-repeat;
   }. Pic2 {Background:url (images/2.jpg) no-repeat;
   }. pic3 {Background:url (images/3.jpg) no-repeat;
    }. pic. pic4 {background:url (images/4.jpg) no-repeat;
   width:700px;
    Pic ul Li {float:left;
    width:100px;
    height:320px;
   Overflow:hidden;
 } txt {background-color:rgba (0, 100, 200,. 5);   height:320px;
   width:100px;
    } txt p {float:left;
    Color: #fff;
   Word-break:break-all;
    } txt. p1 {font-size:12px;
    width:12px;
   padding:30px 10px 0;
    } txt. p2 {font-size:16px;
    width:16px;
   padding:30px 10px 0;
 }

Before we run the above code, we should pay attention to the following issues

Note one: not in. pic4 before. pic Just set the width to 700 what would happen? (. Pic4 is not weighted enough to cause the style to be overwritten.) ）

Notice Two: What happens if we don't add no-repeat? (oneself at that time inadvertently forgot to add no-repeat, picture not normal display, debugging for a long time)

Note Three: in the. pic Inside does not add overflow:hidden; what will happen? (to the back of the JQ when the debugging, found that the picture is always squeezed down)

Next, using the JQuery method is simple, we directly use the animation method inside animate on the line, the code is as follows:

$ (function () {
 $ ('. pic ul Li '). MouseOver (function () {
  $ (this). Animate ({
   width: ' 700px '
  }, 1000). Siblings (). Animate ({
   width: ' 100px '
  }, 1000);
 });

Here, we find a little bit inadequate, the mouse when the animation is very stiff, at this time, we have any way to make our animation look smoother?

What the? Do you say Stop () method? The Stop () method is something I don't seem to know. "Here are some of the things I've learned about the stop () method."

The Stop () method is formatted as follows:

Stop ([Clearqueue], [gotoend])

The function of this method is to stop the animation that is being performed in the selected element, where the optional parameter [Clearqueue] is a Boolean value that indicates whether the animation being executed is stopped. Another optional parameter [Gotoend] is also a Boolean value that indicates whether the animation being executed is completed immediately.
When Stop (): Only the first animation is interrupted;
When Stop (true): interrupts all animations;
When Stop (true,true): Get to the final state directly.

The Stop () method also corresponds to the delay () method, which is formatted as follows:

Delay (duration, [queuename])

The function of this method is to set a delay value to postpone the execution of the animation in subsequent queues, where the parameter is the time value of the delay time, in milliseconds. An optional parameter represents a queue noun, an animation queue (such as: Slidetoggle).

What we need to use here is, of course, the Stop (true).

What we need to use here is, of course, the Stop (true), and after the code is modified, the results are run:

Click on the URL to view: http://sandbox.runjs.cn/show/1l4u3w9d

Using JQ or JS imitation Taobao also use the accordion effect:

With the basis of the front, the back is not so difficult, but the front of the teaching complex a lot of nonsense less said, here directly on the code:

 <div id= "Subject" class= "Home-subjects-v2" > <ul> <li> <a>   <div class= "Info" > 
 

Modify the style so that it is close to the effect in Taobao, the code is as follows:

body,ul,li,p {margin:0;padding:0} ul,ol {list-style:none;} . home-subjects-v2{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px Solid #d3d3d3; Border-color:rgba (0,0,0,.12); Overflow:hidden;width:938px;margin-top:12px;background: #fff}. Home-subjects-v2 ul{width:1000px}. Home-subjects-v2 li{width:156px;height:128px;float:left;overflow:hidden;- webkit-transition:all 1s linear;-moz-transition:all. 1s linear;-o-transition:all. 1s linear;-ms-transition:all. 1s Linear;transition:all 1s linear}. home-subjects-v2 li *{-webkit-transition:all. 1s linear;-moz-transition:all. 1s line ar;-o-transition:all 1s linear;-ms-transition:all. 1s linear;transition:all. 1s linear} home-subjects-v2 li A{width:1 56px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden}. Home-subjects-v2 Li A:hover{position:absolute} home-subjects-v2 li a:hover. Mask{-ms-filter: "Alpha (Opacity=0)"; Filter:alpha (opacity=0); Opacity:0;-webkit-transition:opacity 2s ease-in;-moz-transition:opacity. 2s ease-in;-o-transition:opacity. 2s ease-in;- ms-transition:opacity 2s ease-in;transition:opacity. 2s ease-in}. home-subjects-v2 Li img{height:72px;width:117px; position:absolute;bottom:0;right:-13px} home-subjects-v2 Li Line{height:128px;width:0;font-size:0;border-right : 1px dashed #cacaca;p osition:absolute;right:0;top:4px} home-subjects-v2 li. info{position:absolute;top:0;left:0;  width:136px;padding:4px 10px} home-subjects-v2 li h3{font-size:14px;font-weight:700}. home-subjects-v2 li. Info P{color: #868686 font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px} home-subjects-v2 li. Info p.price{font-size:14px;font-style:italic;color: #fa2a5d height:35px} home-subjects-v2 li. info p.price strong{ font-size:22px;font-family:arial;padding-right:2px} home-subjects-v2 li. Info p.price i{font-size:14px}. Home-subjects-v2 li. Info p.more{display:none}. Home-subjects-v2 Mask{heiGht:128px;width:156px;display:block;position:absolute;top:0;left:0;background: #000;-ms-filter: Alpha (Opacity=0 ) "Filter:alpha (opacity=0); opacity:0;-webkit-transition:opacity 2s ease-in;-moz-transition:opacity. 2s ease-in;-o -transition:opacity 2s ease-in;-ms-transition:opacity. 2s ease-in;transition:opacity. 2s ease-in;_display:none! Important}. Home-subjects-v2. big{width:314px}. Home-subjects-v2. Big a{width:314px}. Home-subjects-v2 h:195px;height:120px;right:0;bottom:0} home-subjects-v2. Big. info{width:294px}. home-subjects-v2. Big. Info H3{font -SIZE:18PX} home-subjects-v2. Big. Info p{font-size:14px;width:166px} home-subjects-v2. Big. Info p.price{font-size:  16PX;PADDING-TOP:7PX} home-subjects-v2. Big. Info P.price strong{font-size:28px} home-subjects-v2, big. Info P.price I{FONT-SIZE:16PX} home-subjects-v2 big. Info p.more{display:block;font-size:12px;color: #ff2a5b}. Home-subjects-v2 . Big. mask{width:314px} home-subjects-v2:hover mask{-ms-filter: "Alpha (opacity=15)"; Filter:alpha (opacity=15) opacity:.15;-webkit-transition:opacity 2s ease-in;- moz-transition:opacity 2s ease-in;-o-transition:opacity. 2s ease-in;-ms-transition:opacity. 2s ease-in;transition:o
 pacity 2s ease-in}

Here, we need to be aware of:

1, out of the partial hidden (Overflow:hidden), out of the partial display (overflow:visible), hidden Elements (display:none), visual hidden elements (Visibility:hidden), we want to distinguish between these concepts

2, opacity transparency, in the standard browser and IE browser transparency is not the same, the previous simple procedure did not consider, but we should always have this awareness.

3, the implementation of dashed lines:. line {position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;} The width of the element is 0 because it only requires the effect of a dashed border.

4, about the mask layer. It is not advisable to think of adding a mask layer to the entire large container before. When the mouse hovers over, the transparency of the mask layer of the large container is not 0, even if the transparency of the mask layer of the Single-column table container at this time does not eliminate the effect of the mask layer of the large container. The right thing to do is to use a mask layer for each list, and when the mouse hovers:. Wrap:hover. Mask{opacity:0.15}.wrap:hover mask:hover{opacity:0} This does not have a superposition effect, Because they are all set for a style, there is also a comparison of weights (drawing on previous experience).

Here's what we do with the native JavaScript method:

Before we write, we have to take a look at our ideas, in front of the accordion effect we need to change a single width on the line, but here we are a lot higher requirements. In the CSS section, we have a prototype of the transformation effect, we will class= "big" added to any Li, the Li will change. Knowing this, the next thing we've done is easier. How do I modify the class in Li? My thinking is as follows:

First write out a main function body get element Li-"list, then list for loop, in the For loop binding bind mouse click event, bind (List[i]," mouseover ", Mouseoverhandler); (Mouseoverhandler is MouseOver's callback ...) ) code is as follows:

function Initlist () {
 //Get each list item
 var list = document.getelementsbytagname ("li");
 for (var i = 0; i < list.length; i++) {
  //monitor bind mouse hover events for each list
  bind (List[i], "mouseover", Mouseoverhandler);
 }
}

Then we write the binding of the event, we need to determine whether the standard event binding or IE event binding, and then perform a different operation, the code is as follows:

function bind (EL, EventType, callback) {
 //standard event binding
 if (typeof El.addeventlistener = = "function") {
  El.addeventlistener (EventType, callback, false);
 else if (typeof el.attachevent = = "function") {
  //ie event binding
  el.attachevent ("on" + EventType, callback);
 }
}

Then we continue to write the mouse hover handler function, the code is as follows:

Mouse hover handler function
Mouseoverhandler (e) {
 var target = E.target | | e.srcelement;
 var list = document.getElementsByTagName ("li");
 for (var i = 0; i < list.length i++) {
  //empty All LI elements of the big
  list[i].classname = "";
 }
 According to the bubbling principle of the event, find the LI element that needs to change the class while
 (target.tagname!= "li" && target.tagname!= "Body") {
  target = Target.parentnode;
 }
 Add class to the current element big
 Target.classname = "big";
}

Finally we write all the functions in the window.onload, don't forget to call Initlist ();

The final implementation effect is shown in figure:

Click link to view, Link:http://runjs.cn/detail/jtuihuj7

Use the JQuery method to achieve the results we want:

From the previous jquery example we can see that using the JQuery method is simpler, we follow the JavaScript analysis idea to complete the jquery code, the following code:

function MouseOver (e) {
 //get to Li tag
 var list = $ (' #subject Li ');
 Get to target Li tag, make add or delete operation
 var target = $ (e.target). Parents (' Li ');
 List.removeclass (' big ');
 Target.addclass (' big ');

(function () {
 var outer = $ (' #subject ');
 Outer.find (' Li '). On (' MouseOver ', mouseover);
}) ()

The end result is the same as the result of the JavaScript method, you can click on the link to view, Link:http://runjs.cn/detail/sa6gthpa

Bookmark with CSS3:
HTML Section Code:

<div id= "Dise" > <pic class= "Demo" > <ul class= "Main_promo clearfix" id= "Main_promo" > <li>
      <input type= "Radio" name= "Radio-set" checked= "Checked"/> "<div class=" slide "> <a href=" # "> <p> dot <br/> <br/> Lip <br/> <br/> Flower <br/> Letter <br/> <br </p> & lt;/a> </div> <div class= "slide_img" style= "Background-image:url" (imgs/1.jpg); " >  

CSS Part code:

HTML {background:-webkit-radial-gradient (center, ellipse, #232323 0, #000 100%);
height:100%;
 } #dise {width:1010px;
 height:380px;
 Margin-left:auto;
 Margin-right:auto;
 margin-top:100px;
Background-color:rgba (255, 255, 255, 0.1);
 } demo {Position:absolute;
 margin-top:20px;
 width:1040px;
 Margin-left:auto;
Margin-right:auto;
 }. Main_promo Li {position:relative;
 Float:left;
 left:0px;
 top:0px;
 padding:5px 0 5px 6px;
Overflow:hidden;

}. Main_promo div {float:left;}
 . slide a {position:relative;
 Z-index:1;
 Display:block;
 width:50px;
 height:300px;
 border-radius:0px;
 Background-color:rgba (255, 255, 255, 0.1);
Transition:all 1.3s;
 }. Slide p {/* Set the font */Position:absolute;
 top:20px;
 left:10px;
 Color: #A7170A;
 height:20px;
 width:100px;
 Font-family: Founder of the traditional body;
 font-size:20px;
 Font-weight:bold;
 text-shadow:2px 2px 4px rgba (0, 0, 0,. 8);
 Word-break:break-all; /*-webkit-transform:rotate ( -90deg); slide_img {
 Overflow:hidden;
 width:0;
 height:0;
* Here's the long width setting can not be omitted, otherwise can not hide * * transition:width 0.7s ease-in-out;
 Input[type= "Radio"] {/*radio and a coincide, to achieve the choice of effect * * position:absolute;
 left:5px;
 z-index:99;
 width:50px;
 height:300px;
opacity:0;
 } input:checked~. Slide a {opacity:1;
 Background:rgba (255, 255, 255, 0.1);
 /* Button Flash effect * * input:checked~. slide_img {width:692px;
 height:300px;
/* The long width here must be set, otherwise do not show * * * MARGIN-LEFT:8PX;
 /* Change the background color to a picture, add a bookmark to it, and set its CSS style. slide_img h4 {font-size:28px;
 Font-weight:bold;
 Background-color:rgba (100, 100, 100,. 5);
Color: #000080;
 }. slide_img. p1 {Background-color:rgba (255, 255, 255,. 5);
Color: #000080;
 }. slide_img. p2 {background-color:rgba (0, 0, 0,. 8);
Color: #00FFFF;
 }. slide_img. p2 span {font-size:40px;
Font-weight:bold;

 }

Concrete Realization Effect Screenshot:

Concrete Case Show: HTTP://SANDBOX.RUNJS.CN/SHOW/U8DYR3HX

After the words:
In the JavaScript method to do imitation Taobao accordion effect is to find video on the internet to learn, but the final video inside the code and the actual operation of the results, followed by the "JavaScript Advanced Program Design" specifically to see the part of the content of the incident, suddenly feel that their previous study too shallow, Take the time to make up the paragraph later.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.