Oficina da Net

Fonte de ícones - Confira o novo ÍCONES BR.

Texto em movimento na barra de estado

Publicado em: 02/08/2007 | JavaScript | Visualizações: 2.220 | 0 Comentário(s)

Vamos ver neste artigo como fazer para que se mova um texto pela barra de estado de nosso navegador. É um script bastante simples e corrente. Sem dúvida, pode ser fácil pegar o script, copiar em nossa página e fazê-lo funcionar, mas nós vamos procurar uma explicação para que tudo fique mais claro e entendamos um pouco o que estamos fazendo.

Este script vai criar um texto que se moverá da direita à esquerda pela barra de estado. Pode-se ver na página de exemplo. Agora vejamos os distintos passos.

1. Defino umas variáveis iniciais
O script pode mover o texto que nós desejarmos e para configurá-lo há que criar uma variável que chamamos texto_estado onde introduziremos nosso texto.

var texto_estado = "            Bem-vindo a minha página web"

Podemos notar que foram introduzidos uns espaços antes que o texto. São para que se crie um espaço na barra de estado entre a saída do texto e a entrada deste pelo outro lado. O número de espaços em branco pode ser modificado livremente, assim como o texto que se mostra.

Também será necessário criar uma variável chamada posição onde vamos salvar a posiç/ao do texto na barra de estado.

var posicao = 0

2. Função para mover o texto
Agora vamos ver a função, a qual chamaremos move_texto(), que se encarrega de mover o texto pela barra de estado. Entender esta função pode ser um pouco complexo se não se conhece um pouco a linguagem Javascript. De qualquer forma, podemos também copia-la e cola-la em nossas páginas embora não consigamos entender. Realiza quatro ações básicas:

    * Move a posição atual, atualizando a variável posição. Se chegarmos ao final da cadeia, volta-se ao princípio
      if (posicao < texto_estado.length)
          posicao ++;
      else
          posicao = 1;
    * Cria uma cadeia a partir do texto original. A cadeia criada contém o texto que existe desde a posição atual até o final concatenado com o que há desde o princípio até a posição atual. Este é o passo que realmente gera o movimento, porque vai mudando a cadeia que logo escreveremos à medida que a posição também muda.
      string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)
    * Escreve a cadeia resultante da operação anterior na barra de estado.
      window.status = string_atual
    * A função chama-se a si mesma para continuar o movimento. Para isso, utiliza-se uma função muito socorrida, setTimeout(), que serve para executar uma sentença com atraso de tempo. A função recebe a sentença para executar (que neste caso, é uma chamada a mesma função) e o número de milésimos de segundos que tem que esperar para executa-la, neste caso 50.
      setTimeout("move_texto()",50)

A função inteira tem este código:

function move_texto(){

   if (posicao < texto_estado.length)

       posicao ++;

   else

       posicao = 1;

   string_actual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)

   window.status = string_atual

   setTimeout("move_texto()",50)

}

3. Chamamos à função
Para começar a mover o texto pela página temos que realizar uma chamada à função que se encarrega disso. Será mais claro o código da página se colocarmos a chamada à função depois que tiver sido definida, embora não seja obrigatório.

move_texto()

4. Tudo junto
Para acabar, podemos observar a seguir o código inteiro de uma página web que move texto pela sua barra de estado. É um página bastante simples depois de tudo.

<html>

<head>

   <title>Texto ena barra de estado</title>

   <script language=" javascript">

   //texto da mensagem

   var texto_estado = "        Bem-vindos a minha página web"

   var posicao = 0

   

    //funcao para mover o texto da barra de estado

   function move_texto(){

      if (posicao < texto_estado.length)

         posicao ++;

      else

         posicao = 1;

      string_atual = texto_estado.substring(posicao) + texto_estado.substring(0,posicao)

      window.status = string_atual

      setTimeout("move_texto()",50)

   }

   move_texto()

   </script>

</head>



<body>

<h1>Exemplo de script com um texto na barra de estado</h1>



</body>

</html>

Pode-se ver o exemplo em funcionamento.

5. Outro exemplo
Dependendo do script que utilizarmos para mover o texto da barra de estado conseguiremos uns efeitos ou outros. A seguir podemos ver um segundo exemplo sobre como mover um texto pela barra de estado utilizando um efeito de movimento distinto.

Não vamos comentar este segundo exemplo porque já se encontra comentado no próprio código fonte, mas poderemos ver que é muito parecido ao anterior.

<html>

<head>

   <title>Segundo exemplo de texto em movimento</title>

</head>



<body>

<h1>Texto em movimento na barra de estado</h1>

<h2>Exemplo 2</h2>



<script language="javascript">



//variável com o texto a mostrar

var texto = "Bem-vindos a minha página web!!!"

//variavel coma osicao no texto. Colocar sempre a 0

var pos = 0



//crio uma funcao para mudar o texto da barra de estado

function textoEstado(){

   //incremento a posicao em 1 e extraio o texto a mostrar neste momento.

   pos = pos + 1

   textoAtual = texto.substring(0,pos)

   //coloco o texto que quero mostrar na barra de estado do navegador

   window.status = textoAtual

   //Chamamos outra vez a esta funcao para que continue    mostrando texto

   if (pos == texto.length){

      //se chegamos ao final, volto ao principio e faco um atraso superior

      pos = 0

      setTimeout("textoEstado()",1500)

   } else{

      //se nao chegamos ao final, continuo com a funcao um atraso minimo.

      setTimeout("textoEstado()",100)

   }

}



/chamo à função para colocar o texto em movimento

textoEstado()

</script>

</body>

</html>