Menu

15. apresentar TEXTOS ROLANTES

Reparou no rodapé da página inicial.... havia uma mensagem que estava sempre rolando. Na verdade, o texto não está rolando como dá a impressão. O que ocorre é a troca do conteúdo a cada um segundo. Para fazer isto escrevemos uma função que, a cada segundo, desloca o texto em um caracter. Ou seja: elimina o primeiro caracter, deslocando o texto, e insere um novo caracter no final do texto. Quando o novo texto é exibido obtemos o efeito apresentado.

No exemplo abaixo apresentamos o código necessário para criar textos rolantes. Os textos serão apresentados na área de status (rodapé) da página bem como em uma caixa de texto de um formulário.

Inicialmente definimos as variáveis a serem utilizadas pela função e preenchemos com "brancos" a variável que conterá o texto a ser exibido, para que o texto comece a ser exibido a partir do canto direito da caixa.

No momento em que o documento é carregado, utilizamos o evento onload para activar a função que fará a apresentação dos textos.

Ex.:

<html>

<script>

/* ----- Apresenta uma caixa de texto rolante no rodapé da página

*/

var Texto = "Simpson Home Page - Principais Comandos............"

var Tamanho = Texto.length

var Trab = Texto.length

var Trab1=0

var Temp = ""

var Mensagem=""

var CtrTime=""

for (x=0 ; x <= 200 ; x++) {

Mensagem += " " }

//

function Mostra() {

if (Trab <= Tamanho && Trab> 0) {

Temp = Mensagem.substring(1, Mensagem.length)

Mensagem = Temp + Texto.substring(Trab1,Trab1 + 1)

Trab--

Trab1++ }

else {

Trab = Texto.length

Trab1 = 0 }

window.status = Mensagem document.Form1.Letreiro.value = Mensagem.substring(150, Mensagem.length) CtrTime = setTimeout("Mostra()", 100)

}

</script>

<body onload="CtrTime = setTimeout(‘Mostra()’, 100)">

<form method="POST" name=Form1>

<p>

<font color="#008000">

<font size=4>

Apresentação de caixa de texto rolante

</font></font>

</p>

<p><input type=text size=50 maxlength=100 name="Letreiro"> </p>

</form>

</body>

</html>
CDs
VOLTAR