Novidades100

CulináriaInternetDetonadosWallpapersPoesiasVideos

Exibir Marquees em Paginas da Internet

Marquees são bem úteis e simples de serem construídas além de ser uma das poucas ferramentas dinâmicas html.
Primeiro vou criar aqui uma marquee básica, depois adicionarei alguns atributos.
Veja um exemplo de marquee ocupando toda a largura da página.

Código da Marquee Acima…

<marquee>
MARQUEE SIMPLES
</marquee>

Este exemplo acima de marquee não contém nenhum atributo, como você pode perceber.

Altura e Largura

Agora adicionando o atributo width (largura) e height (altura).

Código da Marquee Acima…

<marquee width="50%" height="40" bgcolor="#ffdd00" style="padding:1%;">
ALTURA E LARGURA DE MARQUEE
</marquee>

BGcolor

Agora adicionando o atributo bgcolor.

Código da Marquee Acima…

<marquee width="98%" height="20" bgcolor="#aa0000" style="color:#ffff00;padding:1%;">
MARQUEE - BGCOLOR
</marquee>

Scrollamount

Adicionando o atributo scrollamount (velocidade da marquee).

Código da Marquee Acima…

<marquee width="98%" scrollamount="50" bgcolor="#ffff00" style="padding:1%;">
MARQUEE - SCROLLAMOUNT
</marquee>

Adicionando o atributo scrollamount velocidade da marquee).

Código da Marquee Acima…

<marquee width="98%" scrollamount="10" bgcolor="#22ddff" style="padding:1%;">
MARQUEE - SCROLLAMOUNT
</marquee>

Direction

Agora adicionando o atributo direction (direção).

Código da Marquee Acima…

<marquee width="98%" height="20" direction="left" bgcolor="#33ccff" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>

Código da Marquee Acima…

<marquee width="98%" height="20" direction="right" bgcolor="#77dd77" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>

Código da Marquee Acima…

<marquee width="98%" height="100" direction="up" bgcolor="#ffee00" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>

Código da Marquee Acima…

<marquee width="98%" height="100" direction="down" bgcolor="#ffffaa" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>

Behavior

Vamos agora utilizar o atributo Behavior.
Scroll: este é o valor padrão de marquee.

Código da Marquee Acima…

<marquee behavior="scroll" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>

Código da Marquee Acima…

<marquee behavior="slide" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>

Código da Marquee Acima…

<marquee behavior="alternate" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>

Loop

O atributo loop indica quantas vezes você deseja que seja executada a marquee.
Este vai rodar 4 vezes:

Código da Marquee Acima…

<marquee width="98%" bgcolor="#ffcc00" loop="4" behavior="alternate" style="padding:1%;">
LOOP DE MARQUEE
</marquee>

Este vai rodar infinitamente:

Código da Marquee Acima…

<marquee width="98%" bgcolor="#ffcc00" loop="infinite" behavior="alternate" style="padding:1%;">
LOOP DE MARQUEE - INFINITO
</marquee>

Marquee com Imagens

Você pode criar marquees utilizando imagens, links, links com imagens, etc.
Veja exemplos:
Marquee com imagens

Código da Marquee Acima…

<marquee width="98%" height="100" behavior="alternate" bgcolor="#ffcc00" style="padding:1%;">
<img src="https://novidades100.com.br/dicas/images/button.jpg">
</marquee>

Marquee com Links

Código da Marquee Acima…

<marquee width="98%" height="50" behavior="alternate" bgcolor="#cc0000" style="padding:1%;">
<a style="color:#fff;font-size:130%;" href="https://novidades100.com.br/dicas">NOVIDADES100</a>
</marquee>

Marquee com Links e Imagens

Código da Marquee Acima…

<marquee width="98%" height="100" behavior="alternate" bgcolor="#ffcc00" style="padding:1%;">
<a href="https://novidades100.com.br/dicas/"><img src="https://novidades100.com.br/dicas/images/button.jpg"></a>
</marquee>

Marquee Stop

Pausando e reiniciando a marquee.

Para pausar a marquee quando o botão do mouse está sobre ela e reiniciar quando retira, coloque o seguinte script java.

Código da Marquee Acima…

<marquee behavior="alternate" bgcolor="#99ddff" style="padding:1%;" onmouseover="this.stop();" onmouseout="this.start();">
<a href="https://novidades100.com.br"><img src="https://novidades100.com.br/dicas/images/button.jpg"></a>
</marquee>

Conclusão

Pronto. Aí está uma demonstração básica de marquee, o mais você inventa, cria, transforma.
É desnecessário dizer que você deve usar sua criatividade alternando, atributos e propriedades.

Marquees, Páginas de Internet, Marquee

Pressione CTRL + D para Adicionar Esta Página aos Seus Favoritos

Sobre o Autor| Política de Privacidade
novidades100.com.br

Nosso site utiliza cookies e outras tecnologias para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades e outros serviços de acordo com seus interesses.