Olá! Tuesday, 30 de May de 2017.



Dicas CódigoFonte.net
Friday, 09 de November de 2007

Usando Marquee

Olá, tudo bem?

Hoje vamos aprender a movimentar objetos em uma pagina html.

Sabe aqueles textos que se movimentam de um lado para o outro, como um letreiro digital? Hoje vamos aprender a fazer!

É muito simples, basta utilizar a tag
  1. <marqee>


Vamos ver um exemplo:

  1. <title> Exemplo </title>
  2. </head>
  3. </marquee>Este texto aparecerá na tela do computador movimentando-se da direita para a esquerda como um letreiro digital</marquee>
  4. </body>
  5. </html>


Note que o texto fica entre as tags
  1. <marquee> e </marquee>
. Tudo o que estiver entre essas duas tags, vai se movimentar. Você, além de movimentar textos, pode também, movimentar imagens.

Veja um exemplo:

  1. <marquee>
  2. <img src=”imagem.jpg”>
  3. </marquee>


Nesse caso a figura “imagem.jpg” ira se movimentar na tela da direita pra esquerda, constantemente e sem parar, igual a um letreiro digital, só que em vez de texto, uma imagem vai de mexer.

Há alguns atributos úteis da tag marquee. Um dos mais interessantes é o de direção. Você pode definir pra qual direção seu objeto (texto ou imagem) vai se movimentar, pode ser pra esquerda, pra direita, pra cima ou pra baixo. Por padrão o movimento é da direita pra esquerda.
veja um exemplo:

  1. <marquee direction=”right”>
  2. Este exto vai se mexer da esquerda pra direita.
  3. </marquee>


As opções de direction são:
- “right”, da esquerda para direita;
- “left” vice-versa da anterior;
- “up”, de baixo pra cima e
- “down” de cima pra baixo.

Há também outros atributos como velocidade (
  1. <marquee  scrolldelay="45" truespeed>...</marquee>
) onde no valor de scrolldelay você coloca a velocidade em milisegundos, nesse caso coloca-se “truespeed” para validar o atributo.

Até a próxima.

Comentários do artigo [Novo comentário]

João António Cano - 30 de July de 2008 - 16:21
Muito obrigado amigo,dos letreiros eu sabia mas das imagens não,vou tentar.
Eu faço tudo no Outlook Express.
Agradeço se me der uma dica para fazer o meu banner.
Obrigado e um abraço
MARCOS SOUSA FONSECA - 29 de November de 2008 - 18:15
Muito bom, o site está de parabéns!
RenaTo FreiTas - 29 de January de 2009 - 18:42
Gostei, não uso muito HTML mas essas atribuições eu ñ conhecia
Allan - 04 de May de 2009 - 16:19
descuido nesse topico, no primeiro explo, a tag </marque> serai <marque>

arruma ae xD
pedro thauan - 06 de July de 2009 - 01:55
gostei mas com foto não comsegir botar não só com texto
Rafael - 16 de July de 2009 - 11:24
legal
José Ronaldo Sabino Sena - 14 de November de 2009 - 17:54
Muito bom, gostei!!
Eduardo Chiconnelo - 26 de November de 2009 - 14:17
Muito legal. Está me ajudando muito
clebson - 04 de January de 2010 - 20:23
CARA ESSE SITE E IPERULTRAMEGAPAUER D BOM CARA
E SHOW D MAIS
SI FOSSE PRA MIM DA UMA NOTA D 10 A 0 EU DARIA 11 CARA
O SITE BOM
tarlei gama - 04 de August de 2010 - 11:18
Sim, digo a todos, e recomendarei a qualquer um, e outra, farei com que esse site esteja no meu tambem!
Hilton Carlos Silva Júnior - 08 de August de 2010 - 17:15
não estou conseguindo aplicar o efeito na imagem...
martiniano da paz macedo rodrigues - 31 de December de 2010 - 14:57
muito bom e o site tambem concordo com o brother esse site é hiperultramegapower.
gabriel cotsa souza - 27 de April de 2011 - 23:36
lol site mto bom alem do mais q eu num tive tempo pra faz curso de informatica ta me ajudano de mais com meu site
Marcelo - 02 de May de 2011 - 23:19
no primeiro exemplo tá sendo exibido uma tag errada.
errado </marquee>texto</marquee>
certo <marquee>texto</marquee>
juan francisco - 25 de February de 2012 - 20:37
Bom
Ricardo Teixeira - 03 de September de 2012 - 21:46
E para colocar dois textos, ou seja duas frases?
jose Aparecido da Silva - 15 de April de 2014 - 22:59
Gostei muito da dica
Tayssa Silva - 28 de May de 2015 - 15:59
Alguma alternativa pra deixar contínuo? ele so reinicia outro ciclo quando termina o antigo...ficando um espaço vazio na tela durante esse tempo.
Desde ja agradeço, beijao
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010