"Así debéis hacer vosotros: manteneos locos, pero comportaos como personas normales. Corred el riesgo de ser diferentes, pero aprended a hacerlo sin llamar la atención. "

Soy una persona apasionada por todo lo que tiene que ver con Internet y las nuevas tecnologías. Soy autodidacta, y me encanta impartir clases...


Scroll en Div con Javascript

Martes 30 de Noviembre de 2010

Javascript
Autor: César Cancino
Categoría: Javascript
Etiquetas Programación, php, mysl
Comentarios 6

Este es un script que nos permitirá trabajar un sencillo pero eficiente efecto de scroll de texto para nuestro sitio web. Muy útil para por ejemplo crear un widget de noticias, un teletipo, o algún contenido cuyo largo exceda el espacio físico que tenemos para mostrarlo en nuestro diseño. Se adjunta la libreria scroll.js que es necesaria para que funcione. Demás está decir que este script ha sido probado en todos los navegadores y funciona sin problemas.

¿Qué te gustaría compartir con nosotros?

Compartir

Este es un script que nos permitirá trabajar un sencillo pero eficiente efecto de scroll de texto para nuestro sitio web. Muy útil para por ejemplo crear un widget de noticias, un teletipo, o algún contenido cuyo largo exceda el espacio físico que tenemos para mostrarlo en nuestro diseño. Se adjunta la libreria scroll.js que es necesaria para que funcione. Demás está decir que este script ha sido probado en todos los navegadores y funciona sin problemas.

A continuación les muestro una sencilla manera de implementarlo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Scroll en Div con JavaScript</title>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript">
registraScroll(
'flechaAbajo',
'flechaArriba',
'listaNovedades',
1,
-1
);

</script>

<style type="text/css">
.scroll
{
width:500px; height:150px; overflow:hidden; border:1px solid #000000;
}

.flecha
{
cursor:pointer;
}
</style>
</head>

<body>
<!--************************Div donde va el texto del scroll*****************************-->
<div id="listaNovedades" class="scroll">
TERRITORIAL INTEGRADO, REGIÓN METROPOLITANA, PTI A este lanzamiento asistieron la nueva encargada de la Oficina Agrícola la Sra. Mónica Becerra V. el encargado de Microempresas Sr.Jorge Boher, un integrante del equipo técnico de Prodesal, Sr. Ramón Tapia T. y agricultores de Colina.
<br>
<br>
Este programa utilizará toda la gama de herramientas de CORFO y de otras instituciones de fomento públicas y privadas para fortalecer la fruticultura y horticultura de la Región Metropolitana en las provincias de Chacabuco, Melipilla y Maipo. <br>
</div>
<!--*************************fin div donde va el texto del scroll****************************-->
<br><br>
<!--***************************flechas o botones**************************-->
<div id="flechas">
<span id="flechaArriba" class="flecha">Arriba</span>
<br>
<span id="flechaAbajo" class="flecha">Abajo</span>
</div>
<!--********************fin flechas o botones*********************************-->
</body>
</html>


6 Comentarios

  1. javier
    Jueves 03 de Abril de 2014

    Hola quiero ver videos

  2. Diego Fernando Mora
    Domingo 21 de Agosto de 2011

    Hola, he creado un modulo para joomla con el codigo que muestran a continuación, pero no me sirve en explorer en firefox y chrome. Me pueden decir que puede estar pasando. Gracias Diego Fernando Mora

  3. marcelo
    Lunes 01 de Agosto de 2011

    wenisimo!!

  4. truman_truman
    Lunes 02 de Mayo de 2011

    Encontré este que es más facil, espero que surva, saludos: contenido aquí

  5. Elsa Angamarca
    Martes 05 de Abril de 2011

    Gracias por tus videos

  6. Jairo Acosta
    Martes 30 de Noviembre de 2010

    César, hay ulaguna forma de hacer esto pero con imágenes? podrías indicar como hacerlo?