Although there are many plug-ins available, in order to improve together, I have made a series of examples of JavaScript practical series and shared with you. If you have any good suggestions, please be sure to point them out so that you won’t mislead your children!
Today is the first battle: a menu with a collection and release animation effect, the effect is as follows: (The style is a bit ugly (-^-))
(Since I used different editors when I was writing this article, the demo effect cannot be added for the time being. Here are: the final complete code and demonstration)
Animation effect: The mouse hover changes the background and font color of all targets, move the mouse to 'Homepage Navigation', display the grouping menu below. The grouping menu has a submenu. Click to zoom, which will lead to excessive animation effects! Moreover, you can add and delete navigation menus and submenu at will without affecting the effect!
How to achieve it?
Step 1: What to use to implement the menu? The HTML code is designed as follows, following the principle of separation of JS code and HTML code! You can't see a JS code here
This was what it looked like before the style was applied: it was very old! ! !
Step 2: CSS style. Mouse hover changes the background and font color of all targets, and directly use CSS transition and :hover. However, we will not list all other CSS style layouts. Let’s do it yourself. Pay attention to the following points:
#ul{ .... z-index: 100; } #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 3: This step is the key point. If you add event listening to each menu option and grouping, I personally think it's a lot of trouble, and the amount of code must be greater or less. Is there any way to add monitoring to an element to achieve it?
There must be a answer, using the bubbling mechanism of events! Add event listening on the parent element ul tag, and directly change the element style of the trigger event in the listening function, it's that 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 below versions do not have an addEventListener, if you want to be compatible, you must add the corresponding code of attachEvent.
Step 4 : The protagonist appears! Implement listener1, listener2, listener3 listening functions.
First, let’s take the simplest listener1 function, the code is as follows:
function listener1(event){ //event = event||window.event; //Compatible with IE8 and previous versions var target = event.target||event.srcElement; //Compatible with IE8 and previous versions if(target.tagName.toLowerCase() === 'li'){ var div1 = target.getElementsByTagName('div')[0]; div1.style.display = 'block'; var i = 0; var id; (function foo(){ if(i>=1){ clearTimeout(id); id=null; return;} i+=0.2; div1.style.opacity = i; id = setTimeout(function(){clearTimeout(id);foo()},30); })(); } }Again, everything is for IE8 and older versions.
1. Because its event does not have a target attribute, only the corresponding srcElement attribute
2. And this sentence event = event||window.event; can actually be omitted here. Only when using attributes to set registration event listening, such as ul.onmouseover = function(){}, or <ul onmouseover='func'>, IE8 and older versions can only obtain the current Event object through window.event
OK, now that you have obtained the target of the current trigger event, things are much simpler, through which you can change yourself and its relatives!
The following is the listener2 function, which is triggered when mouseout, mainly manipulates the target child element DIV, the code is as follows:
function listener2(event){ //event = event||window.event; var target = event.target||event.srcElement; if(target.tagName.toLowerCase() === 'li'){ var div1 = 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 to hide div1 when the mouse goes out from above div1.style.opacity = 0; } }Okay, by now, most of the effects have been achieved, and there is the last step, that is, the protagonist No. 1: listener3 function, which is mainly responsible for the scaling effect when the mouse is clicked!
Implementation principle:
1. Define a bool variable outside the function as a switch, click on the mouse and click on the off again;
2. Use setTimeout to achieve animation effects, dynamically change the height and opacity attributes of the submenu, and the display attribute;
The complete code is as follows:
var bool = true; function listener3(event) { var event = event || window.event; var target = event.target || event.srcElement; if (target.className === 'show-hide') { var parent = target.parentElement; var adiv = parent.getElementsByClassName('a-div')[0]; if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true} var height = 90, changeH, opacity, id; if (bool) { changeH = 0; opacity = 0; target.innerHTML = 'Financial-'; (function show() { if (changeH > height) {clearTimeout(id);return} changeH += 5; opacity += 0.06; //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; adiv.style.display = 'block'; id = setTimeout(function () { clearTimeout(id); show(); }, 16.7); })(); bool = false; } else { changeH = height; opacity = 1; target.innerHTML = 'financial+'; (function hidden() { if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return} changeH -= 10; opacity -= 0.11; //console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height); adiv.style.height = changeH + 'px'; adiv.style.opacity = opacity; id = setTimeout(function () { clearTimeout(id); hidden(); }, 16.7); })(); bool = true; } } }A few points to note:
1. Remember to clear the ID of setTimeout and exit, otherwise the dead loop is like if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}
2. The delay time of setTimeout is set to 16.7 because it meets the refresh rate of the screen 60FPS, which makes it comfortable to look
3. During the debugging process, when setting the increment and decrement values of changeH and opacity, remember to print it out to facilitate debugging:
console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
4. Finally, the most important thing in the implementation of the entire menu is the following sentence. Without this sentence, you cannot perfectly implement all functions. For example: when you click on a group of submenu and then move to other groups, the situation will be very different; the reason why window.getComputedStyle uses this is that when you open the first time, clicking any group does not respond, because the opacity value cannot be obtained when clicking the first time through event.target directly.
if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true};
However, the getComputedStyle method is not supported below IE9, and the IE Element object has the currentStyle property;
If you are not very familiar with CSS processing, take a look at my summary: Summary of how to read and write CSS styles using native JS
If you want to know 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 take a look at this: Overview of event handling in DOM and a comprehensive analysis of the principles of event handling in DOM
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.