Introducción al lenguaje JavaScript

Persiana de texto auto deslizante

Descripción

Algunos lo habíais pedido: se trata de una ventana por cuyo interior se desplaza una serie de textos o frases . Algo muy útil para colocar noticias, novedades, listas de elementos, etc.. con desplazamiento automático.
Pues aquí está un objeto que os permitirá incorporar estas persianas de texto a vuestras páginas con un mínimo esfuerzo. Es compatible con NS 4.7.
Como siempre el archivo que descargues contiene una muestra para ilustrar el uso de este objeto

Como usarlo

La forma de usarlo es bien simple:

Definir el estilo CSS para el aspecto de la persiana y el texto. Este estilo debe respetar dos atributos: position: absolute o relativa (MSIE) y overflow: hidden.
Colocar en la página un bloque DIV con el estilo definido. Esta será la ventana que contenga el texto.
Definir un array (lista) con los textos que se mostrarán en la ventana definida.
Declarar el objeto oPersiana.
Activar el objeto con el método correspondiente.

En el código fuente de la página de muestra podéis examinar la forma en que se usa para el ejemplo.

Como funciona

Es el objeto que engloba las propiedades del bloque donde se muestra el texto, el propio texto y algunos métodos para su manejo. El funcionamiento se basa en una ventana contenedora fija a traves de la que se leerá el texto, texto colocado en dos ventanas hijas que son las que se desplazan verticalmente y logran el efecto de texto deslizante. El proceso del movimiento es muy simple: primero se rellena con el texto y se sitúa una de las dos ventanas hijas, esta ventana va desplazándose verticalmente, al llegar al borde de la ventana contenedora se produce una pausa, durante la cual se rellena y sitúa la otra ventana hija. Tras la pausa ambas ventanas se desplazarán, la primera irá saliendo del marco contenedor y la segunda irá entrando. Este proceso se repite indefinidamente.

Propiedades
marco	Marco ventana principal o contenedora, es un objeto ventana.
estilo	nombre de un estilo CSS definido para el marco. Este estilo deberá contener el atributo position en absolute o relative y overflow en hidden. Si usais posición relative podéis colocar la ventana contenedora dentro de una tabla, por ejemplo.
textos	Array conteniendo la lista de textos que recorrerán el marco.
txtind	Indice del texto actual en la lista.
pausa	Pausa entre textos.
sent	Sentido del movimiento. 1= Ar-Ab, -1= Ab-Ar.
veloc	Rapidez con que se desplaza el texto.
movil	Una lista con dos ventanas, las que se mueven con el texto.

Métodos
actualizar()	Es el método que va moviendo las ventanas hijas
preparaHija()	Es el encargado de preparar cada ventana hija, colocándole el texto y situándola en la posición de salida inicial, que será bajo la ventana que en un momento dado está siendo mostrada y por supuesto fuera del cuadro contenedor.

Las funciones externas necesarias están contenidas en el fichero rutbasicas.js que acompaña a este archivo.
Como siempre cualquier duda podéis enviarla por e-mail a la dirección de la portada.


	Bajarlo	Verlo