A todos los amigos que han usado QQ para chatear les encanta su función de ocultación automática de ventanas, que puede hacer que la ventana luzca fresca, limpia y dinámica. Varios de mis amigos quieren agregar cosas similares a sus páginas web y, después de una exploración conjunta, descubrieron esto. El efecto se puede lograr con Dreamweaer. Echemos un vistazo a la producción de una barra de menú activa.
Paso 1: hacer que aparezca el menú
Figura 1
Cree un nuevo archivo en Dreamweaer, dibuje una capa, inserte una tabla en la capa (Figura 1), modifique la tabla, luego agregue elementos de menú y cree hipervínculos a cada elemento para eliminar el subrayado del hipervínculo. Puede editar el estilo CSS del hipervínculo. En el panel de estilo CSS, configure la "Decoración" de "Enlace" y "Hover" en "Ninguno" a través del selector de CSS y establezca el "Color" de "Hover". )" se establece en rojo y, finalmente, el estilo establecido se aplica a cada barra de menú (puede presionar la tecla "F12" para obtener una vista previa del efecto).
Paso 2: Diseñe el efecto dinámico del menú
1. Seleccione la capa, mantenga presionado el botón izquierdo cuando el mouse adopte una forma de "cruz" y arrastre la capa a la esquina superior derecha de la página (para que todo el menú La barra está completamente expuesta pero el borde superior está cerca del borde de la página), abra el panel de la línea de tiempo en el menú de la ventana, seleccione la capa y arrástrela a la línea de tiempo. Dreamweaer generará automáticamente un objeto de animación con una longitud de 15 fotogramas. Arrastre el último fotograma clave del objeto de animación hasta los fotogramas 30 y establezca su longitud en 30 fotogramas. Luego haga clic derecho en el fotograma 15, seleccione la opción "Agregar fotograma clave" en el menú contextual emergente para insertar un fotograma clave y arrastre la capa a la posición adecuada (Figura 2). Haga clic derecho nuevamente en el cuadro 15 en la ventana de la línea de tiempo y seleccione "Agregar acción" en el menú de acceso directo emergente para agregar un comportamiento interactivo al cuadro. Dreamweaer abrirá automáticamente el panel de comportamiento. Haga clic en el botón "+" en el panel de comportamiento, seleccione "Línea de tiempo/Detener línea de tiempo" en el menú emergente, abra el cuadro de diálogo "Detener línea de tiempo", seleccione "Línea de tiempo1" y haga clic en el botón "Aceptar" para cerrar el cuadro de diálogo . El evento del comportamiento interactivo es "onFrame15" y la acción es "Detener línea de tiempo", de modo que cuando la línea de tiempo llegue al cuadro 15, la animación dejará de reproducirse, realizando así la función de rebote de la barra de menú.
Figura 2
2. Utilice el mismo método para agregar un comportamiento interactivo "Detener línea de tiempo" en el cuadro 30 de la línea de tiempo, implementando así la función del menú emergente. Después de agregar estos dos comportamientos interactivos, aparece un cuadrado azul en el cuadro correspondiente en la ventana de la línea de tiempo, que representa un comportamiento interactivo. Seleccione la casilla de verificación "Reproducción automática y bucle" para permitir que la animación se reproduzca automáticamente (Figura 3).
Figura 3
3. Ahora necesitamos configurar un comportamiento que permita que la línea de tiempo continúe reproduciéndose después de que se detenga. Mi idea es la siguiente: en el estado normal, la barra de menú aparece pero solo conserva las palabras "Campus Grand View" a continuación, y la ventana emergente y el rebote de la barra de menú se controlan si el mouse pasa sobre "Campus Grand View". Ver" en la barra de menú. . Puede continuar así: seleccione la palabra "Campus Grand View" en la barra de menú (asegúrese de que la dirección del hipervínculo de esta palabra sea "#", es decir, un enlace vacío), haga clic en el botón "+" en el panel de comportamiento , y en la ventana emergente, seleccione "Línea de tiempo/Reproducir línea de tiempo" en el menú, seleccione "Línea de tiempo1" en el cuadro de diálogo que aparece y haga clic en el botón Aceptar. En este momento, se agregará un comportamiento al panel de comportamiento. seleccione el evento "onMouseOver" en su lista desplegable "Eventos", lo que indica que la animación se reproducirá cuando el mouse esté sobre la palabra (Figura 4).
Figura 4
En este punto, se completa una barra de menú activa. Puede presionar la tecla "F12" para obtener una vista previa de su efecto.
Pero esta barra de menú tiene un inconveniente: debe desaparecer cuando el mouse pasa por un área específica debajo de la barra de menú (en este caso, las palabras "Campus Grand View". Si desea que la barra de menú aparezca, simplemente haga clic). Aleje el mouse de la barra de menú para que el menú desaparezca. Es posible que necesite usar Fireworks o Flash. Si tiene algún buen método, escríbanos para discutirlo.