La etiqueta <Marquee> es una etiqueta que aparece en pares. El contenido entre la primera etiqueta <Marquee> y la última etiqueta </marquee> es desplazar el contenido. Los atributos de la etiqueta <Marquee> incluyen principalmente comportamiento, bgcolor, dirección, ancho, altura, hspace, vspace, bucle, scrolllamount, scrolldelay, etc. Todos son opcionales.
Hoy, cuando estaba haciendo un gran sorteo de lotería giratoria en WeChat, quería hacer que los registros de lotería de todos los usuarios en un efecto de desplazamiento sin problemas. Desafortunadamente, mi fundación JS era demasiado pobre y no podía pensar en una manera de lograrlo por el momento, así que tuve varios efectos similares en Baidu. Pero accidentalmente descubrí una etiqueta HTML - <MARQUEE> </MARQUE> puede lograr múltiples efectos de desplazamiento sin control JS. El uso de la etiqueta de marquesina no solo puede desplazar el texto, sino también desplazar imágenes, tablas, etc., y también es conveniente y rápido de usar, lo que realmente me ahorra mucho tiempo.
La etiqueta de marquesina no forma parte de HTML3.2 y solo admite los núcleos posteriores de MSIE3, por lo que si usa navegadores de núcleo no II (como Netscape), es posible que no pueda ver algunos efectos interesantes a continuación. Esta etiqueta es una etiqueta de contenedor.
1. Varios atributos importantes de la etiqueta de marquesina:1.Dirección: Dirección de desplazamiento (incluidos 4 valores: arriba, abajo, izquierda, derecha)
Descripción: arriba: desplazarse de abajo hacia arriba; ABAJO: Desplácese de arriba a abajo; Izquierda: Desplácese de derecha a izquierda; Derecha: desplácese de izquierda a derecha.
Sintaxis: <Marquee Direction = Dirección de desplazamiento> ... </marquee>
2. Behavior: Método de desplazamiento (incluidos 3 valores: desplazamiento, diapositiva, alter)
Descripción: Scroll: bucle scroll, efecto predeterminado; Diapositiva: Detente al desplazarse solo una vez; Alternativo: desplazándose de un lado a otro alternativamente.
Sintaxis: <Comportamiento de marquee = Método de desplazamiento> ... </marquee>
3.ScrollMaunt: Velocidad de desplazamiento (la velocidad de desplazamiento es la longitud del movimiento cuando se establece cada desplazamiento, en píxeles)
Sintaxis: <marquee scrollamount = 5> ... </ marquee>
4. Scrolldelay: establezca el tiempo de retraso entre desplazarse dos veces. Si el valor es grande, habrá un efecto paso a paso (establezca el intervalo de tiempo de desplazamiento, la unidad es milisegundos)
Sintaxis: <marquee scrollldelay = 100> ... </ marquee>
5.loop: establezca el número de veces el ciclo de desplazamiento (el valor predeterminado es -1, el desplazamiento continuará en bicicleta)
Sintaxis: <marquee bucle = 2> ... </ marquee>
<marquee loop = -1 bgcolor =#ccccccc> Seguiré caminando. </marquee>
<marquee loop = 2 bgcolor =#ccccccc> Solo voy dos veces </ marquee>
6. ancho, altura: establezca el ancho y la altura de los subtítulos de desplazamiento
Sintaxis: <marquee width = 500 altura = 200> ... </ marquee>
7.bgcolor: establezca el color de fondo de los subtítulos de desplazamiento (puede ser el valor de color, o la función rgb () o rgba ())
Sintaxis: <marquee bgcolor = rgba (0,0,0,0.2)> ... </marquee>
8.hspace, vspace: espacio en blanco (equivalente a la configuración del valor del margen)
Descripción: Hspace: establezca la distancia entre la posición en los subtítulos activos desde el borde horizontal del contenedor principal, como hspace = 10, que es equivalente a: margen: 0 10px;
Vspace: establezca la distancia entre la posición en los subtítulos activos desde el borde vertical del contenedor principal, como vspace = 10, que es equivalente a: margen: 10px 0;
Sintaxis: <marquee hspace = 10 vspace = 10> ... </ marquee> (equivalente a: margen: 10px;)
9.align: Establezca el método de alineación de los subtítulos de desplazamiento (incluidos 9 valores: Absbottom, Absmiddle, Baselea, Bottom, Izquierda, Medio, Derecha, Texttop, arriba)
Descripción: Absbottom: Absbottom alineada con el extremo inferior de las letras como G, P)
Absmiddle: Alineación absolutamente central
línea de base: alineación de fondo
Abajo: alineación inferior (predeterminado)
Izquierda: Izquierda alineada
Medio: alineación media
Derecha: derecho alineado
Texttop: alineación de la línea superior
Arriba: Alineación superior
Sintaxis: <marquee align = align> ... </marquee>
10.face: establezca fuentes de texto para desplazarse
Sintaxis: <marquee font = kaiti_gb2312> </ marquee>
11.Color: configure el color de texto de los subtítulos de desplazamiento
Sintaxis: <marquee color =#333> </marquee>
12. tamaño: Establezca el tamaño de fuente de texto de los subtítulos de desplazamiento
Sintaxis: <marquee size = 3> </ marquee>
13.strong: configure el texto de los subtítulos de desplazamiento para que sean audaces
2. Dos eventos comunes utilizados por Marquee:Sintaxis: <Marquee Strong> </ marquee>
OnMouseOut = this.Start () se usa para establecer el mouse para continuar desplazándose cuando se mueve fuera de esta área.
OnMouseOver = this.stop () se usa para establecer el mouse para dejar de desplazarse cuando se mueve a esta área.
<marquee onMouseOut = this.Start () onMouseOver = this.stop ()> Dos eventos comunes utilizados por Marquee </ marquee>
El código completo es el siguiente:
<Marquee id = Affiche align = Left Behavior = Scroll BgColor =#FF0000 Direction = Up Height = 300 Width = 200 Hspace = 50 vspace = 20 Loop = -1 Scrolllamount = 10 scroldelay = 100 onMouseOut = this.start () onMouseover = this.stop ()>>
Aunque hay muchos parámetros de <Marquee>, no puede lograr efectos de marquesina especiales complejos y personalizados después de todo, y hay restricciones de navegador, por lo que en más casos usaremos JavaScript para lograr un efecto de desplazamiento de marquesina.
Este es el artículo sobre el efecto de las etiquetas de marquesina de desplazamiento sin problemas en HTML. Esto se trata de este artículo. Para obtener un contenido más relacionado de una carpa de desplazamiento sin costuras, busque artículos anteriores de wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!