JavaScript combat (navigation menu with animated effects)

Although there are many plug-ins available, but in order to improve together, I did a series of JavaScript practical examples, share to everyone, predecessors if there are good suggestions, please be sure to point out, lest fraught ah!

(Original article, transfer please specify: Suse: http://www.cnblogs.com/susufufu/p/5768402.html)

Today is the First battle: a menu with a retractable animation effect such as: (Style a bit ugly (-^-))

Animation effect: The mouse hover changes the background and font color of all targets, the mouse moves to the ' home navigation ', the following group menu is displayed, the Group menu has sub-menu, click to zoom, drive the painting over effect!

How to achieve it?

The first step: what to use to implement the menu? The HTML code is designed as follows

This looks like before the style is applied: it's old!!!

Step two: CSS style. Mouse hover change all the target background and font color, directly with the CSS transition and: hover, and other CSS style layout is not all enumerated, we do it, the main attention to the following points:

#ul{            .... Z-index : +;}#ul Li{ display: inline-block;position:relative;Top:0; Left:-25px;width:10%;Min-width:70px;Height:30px;text-align:Center;Line-height:30px;Border:1px solid Gray;Border-radius:10px;Background-color:AliceBlue;cursor:Pointer;-webkit-transition:All ease-in-out 0.3s;-moz-transition:All ease-in-out 0.3s;-ms-transition:All ease-in-out 0.3s;-o-transition:All ease-in-out 0.3s;transition:All ease-in-out 0.3s; }#ul Li:hover{Background-color:Aquamarine;Color:Red;}        ...        . Show-hide:hover{Background-color:Beige}. A-div{Background-color:Aquamarine;Border-radius:10px;Color:Black; display: none; opacity: 0 }. A{Z-index:-1;Display:Block;            ...        }

Step three: This step is the focus. If you add an event listener to each menu option and group, personally feel good trouble, and the amount of code is certainly much more, is there any way on an element to add monitoring can be achieved?

The answer is definitely yes, using the bubbling mechanism of events! Add event listener on the parent element ul tag, and change the element style of the triggering event directly in the listener function, it is so simple! The code is as follows:

var ul = document.getElementById (' ul '); Ul.addeventlistener (' mouseover ', Listener1,false ); Ul.addeventlistener (' mouseout ', Listener2,false); Ul.addeventlistener (' click ', Listener3,false);

Because IE8 and the following version do not have AddEventListener, if you want to be compatible, you also have to add attachevent corresponding code.

The fourth part: the protagonist debut! Implement Listener1, Listener2, Listener3 listener functions.
First, the simplest listener1 function, the code is as follows:

functionListener1 (event) {//event= Event| | window.event;//compatible with IE8 and previous versions    vartarget = event.target| | Event.srcelement;//compatible with IE8 and previous versions    if(target.tagName.toLowerCase () = = = ' Li '){        varDiv1 = target.getelementsbytagname (' div ') [0]; Div1.style.display= ' Block '; vari = 0; varID; (functionfoo () {if(i>=1) {cleartimeout (ID); id=NULL;return;} I+=0.2; Div1.style.opacity=i; ID= SetTimeout (function(){cleartimeout (ID);foo ()},30);
})();
}
}

Again, all for IE8 and older versions,
1. Because its event does not have a target property, only the relative deserved Srcelement property
2. And this sentence event = event| | Window.event: This can be omitted, but only when the registration event listener is set with a property, such as Ul.onmouseover = function () {}, or <ul onmouseover= ' func '; IE8 and older versions can only be window.event to get the current event object

Well, now that you've got the target of the current trigger, it's a lot easier, and through that he can change itself and its relatives!
Here is the Listener2 function, which is used to trigger the mouseout, mainly manipulating the target's child Div, the code is as follows:

           functionListener2 (event) {//event = event| | window.event;                vartarget = event.target| |event.srcelement; if(target.tagName.toLowerCase () = = = ' Li '){                    varDiv1 = target.getelementsbytagname (' div ') [0]; Div1.onmouseover=function() {Div1.style.display= ' Block '; Div1.style.opacity= 1;                    }; Div1.onmouseout=function() {Div1.style.display= ' None '; Div1.style.opacity= 0;                    }; Div1.style.display= ' None ';//This group is designed to implement hiding DIV1 when the mouse is out of the top div1.style.opacity= 0; }            }    

Well, to here, has achieved most of the effect, and the last step, that is the number 1th protagonist: Listener3 function, it is mainly responsible for mouse click on the zoom effect!
Implementation principle:
1. Function outside the definition of a bool variable as a switch, click on the mouse to open, and then point off;
2. Through settimeout to achieve animation effect, dynamically change the height and opacity properties of the submenu, as well as display properties;
The complete code is as follows:

1 varBOOL =true;2             functionListener3 (event) {3                 varEvent = Event | |window.event;4                 vartarget = Event.target | |event.srcelement;5                 if(Target.classname = = = ' Show-hide ')) {6                     varParent =target.parentelement;7                     varAdiv = Parent.getelementsbyclassname (' a-div ') [0];8                     if(window.getComputedStyle (Adiv,NULL). opacity>0.5) {bool=false}Else{bool=true}9                     varHeight = 90,Ten Changeh, One opacity, A ID; -                     if(bool) { -Changeh = 0; theOpacity = 0; -target.innerhtml = ' Finance-'; -(functionShow () { -                             if(Changeh > Height) {cleartimeout (ID);return} +Changeh + = 5; -Opacity + = 0.06; +Console.log (' opacity: ' +adiv.style.opacity+ ', Height: ' +adiv.style.height); AAdiv.style.height = Changeh + ' px '; atAdiv.style.opacity =opacity; -Adiv.style.display = ' block '; -id = setTimeout (function () {
Cleartimeout (ID); - Show (); -}, 16.7); -                         })(); in  -BOOL =false; to}Else { +Changeh =height; -Opacity = 1; thetarget.innerhtml = ' Finance + '; *(functionhidden () { $                             if(Changeh < 0) {cleartimeout (id); adiv.style.display = ' none ';return}Panax NotoginsengChangeh-= 10; -Opacity-= 0.11; theConsole.log (' opacity: ' +adiv.style.opacity+ ', Height: ' +adiv.style.height); +Adiv.style.height = Changeh + ' px '; AAdiv.style.opacity =opacity; theid = setTimeout (function () {
Cleartimeout (ID); + hidden (); -}, 16.7); $                         })(); $BOOL =true; -                     } -                 } the}

Note the points:
1. Remember to clear the SetTimeout ID and then exit, otherwise die loop, such as if (Changeh < 0) {cleartimeout (id); adiv.style.display = ' none '; return}
The delay time of 2.setTimeout is set to 16.7 because it meets the refresh rate of the screen 60FPS and looks comfortable
3. During the debugging process, set Changeh and opacity increment decreasing value, remember to print out, convenient debugging: Console.log (' opacity: ' +adiv.style.opacity+ ', Height: ' + Adiv.style.height);
4. Finally, the entire menu implementation, the most critical is the following sentence, if you do not have this sentence, you can not perfect all the functions, such as: You open a set of sub-menu, and then move to the other group click, the situation will be very different The reason why window.getComputedStyle use this is that, when first opened, the first point of any group did not respond, because the opacity value was not taken directly through the event.target at the point first  . 

if (window.getComputedStyle (adiv,null). opacity>0.5) {bool=false}else{bool=true};

However, the IE9 below does not support the getComputedStyle method, ie's element object has currentstyle attribute;

If you are not familiar with the process of CSS, look at my summary: using native JS to read and write CSS style method summary

If you want to learn more about the application of the settimeout () method, take a look at this: Do you really know how settimeout works?

for the event handling mechanism, you can look at this: An overview of event handling in DOM and a comprehensive analysis of its principles

Well, to this end, there is wrong and better place, welcome advice!

JavaScript combat (navigation menu with animated effects)