Aunque hay muchos complementos disponibles, para mejorar juntos, he hecho una serie de ejemplos de series prácticas de JavaScript y compartido con usted. Si tiene buenas sugerencias, asegúrese de señalarlas para que no engañe a sus hijos.
Hoy es la primera batalla: un menú con un efecto de animación de colección y lanzamiento, el efecto es el siguiente: (el estilo es un poco feo (-^-)))
(Dado que utilicé diferentes editores cuando estaba escribiendo este artículo, el efecto de demostración no se puede agregar por el momento. Aquí están: el código completo y la demostración final)
Efecto de animación: el ratón se desplaza cambia el fondo y el color de la fuente de todos los objetivos, mueve el mouse a 'navegación de la página de inicio', muestre el menú de agrupación a continuación. El menú de agrupación tiene un submenú. ¡Haga clic para Zoom, lo que conducirá a efectos de animación excesivos! Además, ¡puede agregar y eliminar los menús de navegación y el submenú a voluntad sin afectar el efecto!
¿Cómo lograrlo?
Paso 1: ¿Qué usar para implementar el menú? ¡El código HTML está diseñado de la siguiente manera, siguiendo el principio de separación del código JS y el código HTML! No puedes ver un código JS aquí
Esto era lo que parecía antes de aplicar el estilo: ¡era muy viejo! ! !
Paso 2: estilo CSS. Mouse flotante cambia el fondo y el color de la fuente de todos los objetivos, y use directamente la transición CSS y: el flotador. Sin embargo, no enumeraremos todos los otros diseños de estilo CSS. Hagámoslo tú mismo. Presta atención a los siguientes puntos:
#UL {.... Z-índice: 100; } #ul li {display: inline-block; Posición: relativo; arriba: 0; Izquierda: -25px; Ancho: 10%; Min-Width: 70px; Altura: 30px; Text-Align: Center; Línea de altura: 30px; borde: 1px gris sólido; Border-Radius: 10px; Color de fondo: Aliceblue; cursor: puntero; -WebKit-Transition: todas las 0.3s de facilidad; -MOZ-Transition: todos los 0.3s de facilidad; -Ms-Transition: todos los 0.3s de facilidad; -O-transición: todas las 0.3 de facilidad; TRANSICIÓN: TODA EL ENFERMEDO 0.3S; } #ul li: hover {background-color: aquamarine; color: rojo;} ... .show hide: hover {background-color: beige} .a-div {background-color: aquamarine; Border-Radius: 10px; Color: negro; Pantalla: ninguno; opacidad: 0} .a {z -index: -1; Pantalla: bloque; ...}Paso 3: Este paso es el punto clave. Si agrega evento escuchando cada opción de menú y agrupación, personalmente creo que es muchos problemas, y la cantidad de código debe ser mayor o menos. ¿Hay alguna forma de agregar monitoreo a un elemento para lograrlo?
¡Debe haber una respuesta, utilizando el mecanismo burbujeante de los eventos! Agregue la escucha del evento en la etiqueta UL del elemento principal y cambie directamente el estilo de elemento del evento de activación en la función de escucha, ¡es así de simple!
El código es el siguiente:
var ul = document.getElementById ('ul'); ul.addeventListener ('Mouseover', oyente1, falso); ul.addeventListener ('Mouseout', oyente2, falso); ul.AdDeventListener ('Haga clic', oyente3, falso);Debido a que las versiones IE8 y debajo no tienen un AddEventListener, si desea ser compatible, debe agregar el código correspondiente de adjunta.
Paso 4 : ¡Aparece el protagonista! Implemente las funciones de escucha de oyentes1, oyente2, oyente3.
Primero, tomemos la función de oyente1 más simple, el código es el siguiente:
function listyer1 (evento) {// event = event || window.event; // Compatible con IE8 y versiones anteriores var Target = Event.Target || Event.SrCelement; // Compatible con IE8 y versiones anteriores if (Target.tagname.tolowerCase () === 'Li') {var div1 = target.getElementsByTagName ('div') [0]; div1.style.display = 'bloque'; 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);}) (); }}Nuevamente, todo es para versiones IE8 y más antiguas.
1. Debido a que su evento no tiene un atributo objetivo, solo el atributo SRCelement correspondiente
2. Y esta oración Event = Event || Window.event; en realidad se puede omitir aquí. Solo cuando se usa atributos para establecer la escucha de eventos de registro, como UL.OnMouseOver = function () {}, o <ul onMouseOver = 'func'>, IE8 y las versiones anteriores solo pueden obtener el objeto de evento actual a través de Window.Event.
Ok, ahora que ha obtenido el objetivo del evento de activación actual, ¡las cosas son mucho más simples, a través del cual puede cambiar usted mismo y sus parientes!
La siguiente es la función de oyente2, que se activa cuando MouseOut, manipula principalmente el elemento infantil objetivo Div, el código es el siguiente:
function listyer2 (evento) {// 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 = 'ninguno'; // Este grupo es ocultar Div1 cuando el mouse sale desde arriba Div1.Style.Opacity = 0; }}De acuerdo, a estas alturas, la mayoría de los efectos se han logrado, y existe el último paso, es decir, la función protagonista No. 1: Listener3, que es principalmente responsable del efecto de escala cuando se hace clic en el mouse.
Principio de implementación:
1. Defina una variable bool fuera de la función como un interruptor, haga clic en el mouse y haga clic en el apagado nuevamente;
2. Use SetTimeout para lograr efectos de animación, cambie dinámicamente los atributos de altura y opacidad del submenú y el atributo de visualización;
El código completo es el siguiente:
var bool = true; function listyer3 (evento) {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 hight = 90, Changeh, Opacity, id; if (bool) {Changeh = 0; opacidad = 0; Target.innerhtml = 'Financial-'; (función show () {if (cambioh> altura) {ClearTimeOut (id); return} Changeh += 5; Opacity += 0.06; //console.log('Opacity:'+adiv.style.opacity+',Height: ' +adiv.style.height); adiv.style.heighthight +' px '; adiv.Style.Opacity; adiv.style.display = 'block'; bool = falso; } else {ChangeH = Height; opacidad = 1; Target.innerhtml = 'Financial+'; (function Hidden () {if (Changeh <0) {ClearTimeOut (id); adiv.style.display = 'none'; return} Changeh -= 10; opacidad -= 0.11; //console.log('Opacity:'+adiv.style.opacity+',hheight: '+adiv.style.height); adiv.style. adiv.style.opacity = opacidad; bool = verdadero; }}}Algunos puntos a tener en cuenta:
1. Recuerde borrar la identificación de setTimeOut y salir, de lo contrario, el bucle muerto es como si (Changeh <0) {ClearTimeOut (id); adiv.style.display = 'None'; return}
2. El tiempo de retraso de SetTimeout se establece en 16.7 porque cumple con la tasa de actualización de la pantalla 60 fps, lo que hace que sea cómodo de mirar
3. Durante el proceso de depuración, al establecer los valores de incremento y disminución de Changeh y Opacidad, recuerde imprimirlo para facilitar la depuración:
console.log ('opacidad:'+adiv.style.opacity+', altura:'+adiv.style.height);
4. Finalmente, lo más importante en la implementación de todo el menú es la siguiente oración. Sin esta oración, no puede implementar perfectamente todas las funciones. Por ejemplo: cuando hace clic en un grupo de submenú y luego se muda a otros grupos, la situación será muy diferente; y la razón por la cual Window.getComputedStyle usa esto es que cuando abre la primera vez, hacer clic en cualquier grupo no responde, porque el valor de opacidad no se puede obtener al hacer clic en la primera vez a través de Event.Target directamente.
if (window.getComputedStyle (adiv, null) .opacity> 0.5) {bool = false} else {bool = true};
Sin embargo, el método GetComputedStyle no es compatible con el IE9, y el objeto IE Element tiene la propiedad CurrentStyle;
Si no está muy familiarizado con el procesamiento de CSS, eche un vistazo a mi resumen: Resumen de cómo leer y escribir estilos CSS usando JS nativo
Si desea saber más sobre la aplicación del método SetTimeOut (), eche un vistazo a esto: ¿Sabe realmente cómo funciona SetTimeout?
Para el mecanismo de manejo de eventos, puede echar un vistazo a esto: descripción general del manejo de eventos en DOM y un análisis exhaustivo de los principios de manejo de eventos en DOM
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.