HTML.Dyn@mico - Scroller Dinamico

Inicio | Ayuda | Chat | Libro de Visitas

HTML.Dyn@mico

Scroller Dinámico

Anterior

Inicio

Descripción: Este es un scroller muy completo, totalmente personalizable (colores, fuente, velocidad, pausas, etc).

Demo:

Instrucciones

Paso 1: Agregue el siguiente código en el BODY de su web, donde quiera ver el Scroller:

<div id="tempholder"></div> <script language="JavaScript" src="dhtmllib.js"></script> <script language="JavaScript" src="scroller.js"></script> <script language="JavaScript"> /****************************************** * Scroller Script - HTML.Dynamico 2001 * Mas Scripts y Recursos para tu web en: * http://www.htmldynamico.cjb.net ******************************************/ //DEFINA LA APARIENCIA Y LOS MENSAJES DEL SCROLLER var myScroller1 = new Scroller(0, 0, 480, 45, 1, 5); //(xpos, ypos, width, height, border, padding) myScroller1.setColors("#006600", "#ccffcc", "#009900"); //(fgcolor, bgcolor, bdcolor) myScroller1.setFont("Verdana,Arial,Helvetica", 2); myScroller1.addItem("<b>Haz Click para entrar en <a href='http://www.htmldynamico.cjb.net'>HTML.Dynamico</a>, tu centro de recursos DHTML en español!</b>"); myScroller1.addItem("<b>Visite <a href='http://www.download.com/'>Download.com</a>, todo para bajar!</b>"); myScroller1.addItem("<b>Looking for free JavaScripts? Visit <a href='http://javascriptkit.com/'>JavaScript Kit.</a>"); myScroller1.addItem("<b>Discuss and get help on web coding, at <a href='http://www.codingforums.com/'>CodingForums.com</a></b>"); //DEFINA LA PAUSA DEL SCROLLER myScroller1.setPause(2500); //Pausa entre mensajes, en milliseconds function runmikescroll() { var layer; var mikex, mikey; // Locate placeholder layer so we can use it to position the scrollers. layer = getLayer("placeholder"); mikex = getPageLeft(layer); mikey = getPageTop(layer); // Create the first scroller and position it. myScroller1.create(); myScroller1.hide(); myScroller1.moveTo(mikex, mikey); myScroller1.setzIndex(100); myScroller1.show(); } window.onload=runmikescroll </script> <div id="placeholder" style="position:relative; width:420px; height:32px;"> </div>

Paso 2: El script requiere dos archivos externos .js, los cuales deberás descargar del siguiente archivo.zip y subirlos a tu directorio web:

scroller.zip (click derecho del mouse y elegir "Guardar destino como...")

Este Scroller tiene varia opciones, las cuales son usadas en el código del Paso 1:

Scroller(x, y, width, height, border, padding) *	Crea un nuevo Scroller posicionado en (x,y) con las dimensiones definidas(width y heigth). Los valores border y padding definen el tamaño del borde y el margen entre el borde y el texto.
setColors(fgcolor, bgcolor, bdcolor)	Define los colores del texto, fondo y del borde, respectivamente, para el scroller. Los predefinidos son negro, blanco y negro, respectivamente.
setFont(face, size)	Define la fuente y el tamaño de la letra. Las predeterminadas son "Arial,Helvetica" and 2 respectivamente.
setSpeed(pps)	Define la velocidad del Scroller en pixeles por segundo. Default es 50.
setPause(ms)	Define el tiempo de la pausa del scroler hasta que un nuevo item se mueva. El tiempo es en millisegundos (1000ms = 1 segundo). Default es 2000.
addItem(str) *	Use este método para crear items en el scroller. Puedes agregar cuantos quieras.

Listo!

Consultas

Envianos tus consultas o comentarios.

Recomendar

Puedes Recomendar esta web a tus amigos.



		HTML.Dyn@mico - © 2001-2003 - Todos los derechos reservados . www.htmldynamico.cjb.net