| Culinária | Detonados | Internet | Poesias | Wallpapers | Web Tools |
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.
<marquee>
MARQUEE SIMPLES
</marquee>
Este exemplo acima de marquee não contém nenhum atributo, como você pode perceber.
Agora adicionando o atributo width (largura) e height (altura).
<marquee width="50%" height="40" bgcolor="#ffdd00" style="padding:1%;">
ALTURA E LARGURA DE MARQUEE
</marquee>
Agora adicionando o atributo bgcolor.
<marquee width="98%" height="20" bgcolor="#aa0000" style="color:#ffff00;padding:1%;">
MARQUEE - BGCOLOR
</marquee>
Adicionando o atributo scrollamount (velocidade da marquee).
<marquee width="98%" scrollamount="50" bgcolor="#ffff00" style="padding:1%;">
MARQUEE - SCROLLAMOUNT
</marquee>
Adicionando o atributo scrollamount velocidade da marquee).
<marquee width="98%" scrollamount="10" bgcolor="#22ddff" style="padding:1%;">
MARQUEE - SCROLLAMOUNT
</marquee>
Agora adicionando o atributo direction (direção).
<marquee width="98%" height="20" direction="left" bgcolor="#33ccff" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>
<marquee width="98%" height="20" direction="right" bgcolor="#77dd77" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>
<marquee width="98%" height="100" direction="up" bgcolor="#ffee00" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>
<marquee width="98%" height="100" direction="down" bgcolor="#ffffaa" style="padding:1%;">
MARQUEE - DIRECTION
</marquee>
Vamos agora utilizar o atributo Behavior.
Scroll: este é o valor padrão de marquee.
<marquee behavior="scroll" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>
<marquee behavior="slide" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>
<marquee behavior="alternate" width="98%" bgcolor="#ffcc00" scrollamount="80" style="padding:1%;">
MARQUEE - BEHAVIOR
</marquee>
O atributo loop indica quantas vezes você deseja que seja executada a marquee.
Este vai rodar 4 vezes:
<marquee width="98%" bgcolor="#ffcc00" loop="4" behavior="alternate" style="padding:1%;">
LOOP DE MARQUEE
</marquee>
Este vai rodar infinitamente:
<marquee width="98%" bgcolor="#ffcc00" loop="infinite" behavior="alternate" style="padding:1%;">
LOOP DE MARQUEE - INFINITO
</marquee>
Você pode criar marquees utilizando imagens, links, links com imagens, etc.
Veja exemplos:
Marquee com imagens
<marquee width="98%" height="100" behavior="alternate" bgcolor="#ffcc00" style="padding:1%;">
<img src="https://novidades100.com.br/dicas/images/button.webp">
</marquee>
<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 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.webp"></a>
</marquee>
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.
<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.webp"></a>
</marquee>
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
Nosso site utiliza cookies para melhorar sua experiência ao utilizar nosso conteúdo, além de personalizar publicidades de acordo com seus interesses.
Política de Privacidade
