¡Discuz! Onmouseover="showMenu()" tutorial sobre cómo utilizar la función de menú flotante.
Igual que el mensaje flotante en las dos imágenes de arriba, con una hermosa flecha.
¡A continuación te explicamos paso a paso!
1. La función JS que activa el mensaje flotante: showMenu();
El archivo static\js\common.js tiene 872 líneas, que es la definición de esta función. No importa si no comprende esta función, puede utilizarla. Expliquemos cómo usarlo.
2. Uso de showMenu():
El archivo JS definido por la función anterior está en el JS central de DZ, por lo que no necesitamos recargar el archivo cuando lo usamos. porque el sistema se ha cargado por usted y se puede usar directamente, pero el requisito previo es que debe estar en el sistema DZ, como cualquier archivo de plantilla de página, complemento, archivo de plantilla de una sola página de DZ, etc. (Haga clic para ver cómo hacer Discuz! Una sola página), excede el accidente del sistema DZ y no se puede usar.
En primer lugar hay que tener claro que este efecto debe estar compuesto por dos partes:
1. Capa de visualización (contenido que se muestra directamente en la plantilla, al mover el ratón hacia arriba se activará). la capa flotante);
p>
2. Ocultar la capa flotante (está oculta y no se muestra de forma predeterminada. La visualización solo se activará cuando el mouse se coloque sobre la capa de visualización) .
Entonces, configuramos dos componentes por separado.
El efecto es el siguiente:
Cuando se coloca el ratón sobre el texto, se activa y se muestra la capa flotante.
Cabe señalar que:
Las anteriores son las funciones básicas de la función. Comencemos con una explicación detallada de cómo usar flechas para embellecer la suspensión.
Tercero, mensaje flotante con flechas
Mire el efecto de la imagen de arriba. Quizás la posición de la capa emergente y la posición de la flecha no sean nuestras posiciones ideales. Puedes ajustar el < div id = " test _ menu " class = " tip tip _ 4 " style = " display: none;" Mira la imagen de arriba. ¿La posición de la ventana emergente flotante se ha movido ligeramente hacia la izquierda? El margen izquierdo aquí es -100 px; esto significa moverse 100 píxeles hacia la izquierda.
De manera similar, la flecha debe moverse hacia la derecha, como se muestra a continuación:
Como se muestra en la imagen de arriba, la flecha se ha movido 110 píxeles hacia la derecha.
Además, si deseas modificar el ancho y alto de la capa flotante emergente, también puedes agregar CSS a esa área para definir los valores de ancho y alto.