Scroller para la barra de estado

Determinar las variables de la aplicaci�n

Lo primero que debemos hacer nada m�s ver qu� es lo que har� nuestro programa, debemos determinar las variables que vamos a usar; en nuestro caso nosotros lo que queremos es que un texto vaya de un lado a otro de la barra de estado, pues entonces, la primera variable que vamos a necesitar ser� una que guarde el mensaje. Despu�s, otra de las variables que m�s saltan a la vista, es la de la velocidad de retardo del scroll, y tambi�n el ancho del scroller, por lo tanto tendremos tres variables que vamos a utilizar para configurar nuestro script:

var mensaje = "* WEBESTILO.COM *";
var velocidad = 25;
var ancho = 50;

Determinar el m�todo que se va a usar

Bueno, en esta parte del script debemos determinar la forma de mover el texto de un lado a otro, y la forma de hacerlo, ser� poniendo delante de la variable mensaje una variable que contenga tantos espacios como el ancho de la barra, pero para que "eso se mueva", tenemos que usar un contador, y a�adir delante de mensaje una subcadena de una variable delante ( por ejemplo ) desde el principio, contador:

var delante = "";
var cnt = 0;
for ( var i = 0 ; i < ancho-mensaje.length ; i++ )
   delante += ' '; 

Determinar el n�mero de funciones y desarrollarlas

Est� claro que en este script, vamos a usar dos funciones aunque se podr�a usar solo una, pero es m�s c�modo e igual de r�pido usar dos, una que mueva el texto hacia la derecha y otra que lo mueva hacia la izquierda. Pero antes debemos declarar una variable m�s que nos ahorrar� quebraderos de cabeza y que luego no entendamos nuestro c�digo, se usar� para guardar la informaci�n a mostrar ( ej.: muestra ):

var muestra, max = ancho-mensaje.length; 
La primera funci�n ser�a de la siguiente manera: 
function derecha() 
{ 
   if ( cnt == 0 ) 
   { 
      muestra = mensaje; 
      setTimeout("derecha()", velocidad); 
   } 
   if ( cnt >= 1 ) 
   { 
      muestra = delante.substring(0,cnt) + mensaje; 
      setTimeout("derecha()", velocidad); 
   } 
   if ( cnt == max ) 
   { 
      cnt = -2; 
      setTimeout("izquierda()", velocidad); 
   } 
   cnt++; 
   window.status = muestra; 
} 

En el primer if, lo que se comprueba es si el mensaje est� al principio de la barra de estado, entonces se muestra el mensaje tal cual y se llama otra vez a la misma funci�n con un retardo de tiempo igual a velocidad. En el segundo, se comprueba si cnt es distinto de 0, y se muestra una subcadena de delante que va desde el principio de delante hasta la posici�n cnt y mensaje; y por �ltimo se vuelve a llamar a la funci�n derecha con el retardo de tiempo equivalente a tiempo.

muestra = delante.substr(0,cnt) + mensaje;
setTimeout("derecha()", velocidad); 

En la tercera condici�n se eval�a si el texto est� al final, en cuyo caso se llamar�a a la funci�n izquierda que es la segunda funci�n de nuestro script. Y la segunda funci�n ser�a algo as�:

function izquierda() 
{ 
   if ( cnt == 0 ) 
   { 
      muestra = delante + mensaje; 
      setTimeout("izquierda()", velocidad); 
   } 
   if ( cnt >= 1 ) 
   { 
      muestra = delante.substring(0,(max-cnt)) + mensaje; 
      setTimeout("izquierda()", velocidad); 
   } 
   if ( cnt == max ) 
   { 
      cnt = -2; 
      setTimeout("derecha()", velocidad); 
   } 
   cnt++; 
   window.status = muestra; 
} 

Esta funci�n hace pr�cticamente lo mismo que la anterior a excepci�n de la segunda condici�n, en la cual la subcadena que se pone delante de mensaje se construye desde 0 hasta max-cnt, es decir cada vez uno menos en lugar de una m�s. S�lo queda inicializar el script mediante una llamada a derecha() o a izquierda(), si quieren ver el script en funcionamiento, pulsen en el siguiente bot�n:

Valoraci�n

Comentarios

A�adir un comentario

Si no est� de acuerdo con algo o quiere a�adir m�s informaci�n al respecto puede incluirla a�adiendo un comentario.

Colabora

�Te sientes capacitado para escribir un art�culo como este? �Te gustar�a colaborar escribiendo art�culos en WebEstilo? H�znoslo saber !!