Publicentral.com - publicentra, promocion, promocionar, buscadores, paginas webs, registroPublicentral.com - promocion de paginas web y negocios online
Mostrando Codigo - Javascript
Code

Javascript - Scroll de noticias

Códigos Javascript

Este codigo lo utilizamos como un scroll de noticias, aunque puede ser utilizado para muchos fines. Esta elaborado con javascript y Css. Solo debemos modificar entre style - /style y el texto que queremos mostrar en nuestras noticias
Visitas: 40,259 - 17/12/2003 23:16:37
Archivo descargable »
DemoDownloadComentario
EXPLICACION
Archivo descargable
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <HEAD>
  2. <script>  
  3. function Iniciar(){
  4.   Noticias_principal.style.left = Contenido.offsetLeft + Lector_noticias.offsetLeft +4
  5.   Noticias_principal.style.top = Contenido.offsetTop + Lector_noticias.offsetTop
  6.   Noticias_principal.style.width = Contenido.offsetWidth -1
  7.   Noticias_principal.style.height = Contenido.offsetHeight - 1
  8.   S_noticias()
  9. }
  10. var Bloque
  11. var T_inicio = 150
  12. var mi_inicio = 0
  13. var mi_fin = 0
  14. var Top = T_inicio
  15. var start = 1
  16. function S_noticias(){
  17.   if (Top == 4)
  18.     {
  19.       mi_fin = mi_inicio
  20.       mi_inicio >= (noticia.length-1) ? mi_inicio = 0 : mi_inicio++
  21.       Top = T_inicio
  22.       setTimeout("S_noticias()",2000)
  23.       start=0
  24.       return false
  25.     }
  26.   if (Top == (T_inicio-1)) {noticia[mi_fin].style.top = T_inicio}
  27.   Top--
  28.   noticia[mi_inicio].style.top = Top
  29.   if (start==0){noticia[mi_fin].style.top = Top-146}
  30.   setTimeout("S_noticias()",5)
  31. }
  32. </script>
  33. <style>
  34. .Bloque{display: block; position: absolute;  top: 150; left: 0; font: 12 Arial; width:222; border: 1 solid black}
  35. .Cabecera{color: #ffffff; background: #336600;}
  36. .Contenido{width:220; font: 12 Courier New; background: #F3F3F3; padding: 2 2 2 2;}
  37. .Nuevo_bloque{border: 1px solid black ; width: 232; height: 150;background: black; color: white; font: 14 Arial; text-align: center}
  38. .Nuevo_contenido{height: 125; background: white}
  39. .Contenido_principal{border: none; position: absolute; left: 0; top: 0; width: 100; height: 100; clip: rect(0,222,125,0 ); background: transparent}
  40. </style>
  41. </HEAD>
  42. <BODY onload="Iniciar()">
  43. <TABLE ID="Lector_noticias" CLASS="Nuevo_bloque" CELLPADDING=0 CELLSPACING=0 ALIGN="center">
  44.   <TR>
  45.     <TD bgcolor="#990000"><B> Noticias </B></TD>
  46.   </TR>
  47.   <TR><TD ID="Contenido" CLASS="Nuevo_contenido"> </TD></TR>
  48. </TABLE>
  49. <DIV ID="Noticias_principal" CLASS="Contenido_principal">
  50. <TABLE CLASS="Bloque" ID="noticia" CELLSPACING=0 CELLPADDING=1 BORDER=0>
  51.     <TR CLASS="Cabecera"><TD>Tutores.org</TD></TR>
  52.     <TR><TD CLASS="Contenido">Se estan agregando nuevos codigos constantemente<BR>web de webmasters<BR>para webmasters</TD></TR>
  53. </TABLE>
  54. <TABLE CLASS="Bloque" ID="noticia" CELLSPACING=0 CELLPADDING=1 BORDER=0>
  55.     <TR CLASS="Cabecera"><TD>Foros de tutores.org</TD></TR>
  56.     <TR><TD CLASS="Contenido">No olvides postear mensaje<BR>en nuestros foros</TD></TR>
  57. </TABLE>
  58. <TABLE CLASS="Bloque" ID="noticia" CELLSPACING=0 CELLPADDING=1 BORDER=0>
  59.     <TR CLASS="Cabecera"><TD>Servicios online</TD></TR>
  60.     <TR><TD CLASS="Contenido">Si necesitas interaccion en tu web<BR><A HREF="http://www.tutores.org" TARGET="_blank">Tutores.org</A><BR>Saludos</TD></TR>
  61. </TABLE>
  62. </DIV>
  63. </BODY>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Scroll de noticias" href="http://www.tutores.org/codigo/916/" target="_blank">Scroll de noticias</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
20/06/2004 4.44.33
2 5
Hola, he intentado colocarlo en una página con otras cosas y en un sitio determinado, diferente al de vuestro ejemplo y no me funciona, pues los recuadroa interiores en movimiento me aparecen a la izquierda y arriba. ¿Cómo he de hacer para poder cambiarlo de posición? Gracias de antemano. Jaime.
Comentario usuario
19/04/2003
5 5
Hola
estoy comprobando el script, de todas formas lo hemos puesto en un archivo .zip para que puedas descargarlo.
A ver si te funciona.
saludos
Comentario usuario
13/02/2005 20.32.23
3 5
Saludos. ¿Cómo podría cambiar el script para que no se ajustase a la ventana y quedasé siempre fijo?. Gracias
Comentario usuario
23-05-2007 09:43:00
5 5
El codigo no funciona el Firefox, hay alguna manera de que funcione? gracias y un saludo!
Comentario usuario
26-10-2007 17:36:45
4 5
no sirve lo puse pero se pone en la parte superior de arriba de la pagina

no me sirve

me seria util que me enviaran un correo con el code correcto
Comentario usuario
albertoxp53
5 5
Me ha gustado este script pero tiene una pega solo funciona en Internet Explorer en Firefox 3 no me funciona, ahi algun remedio para que funcione en Firefox. Atentamente, gracias!!
Comentario usuario
DSalex
2 5
es verdad lo probe y sale en la parte de arriba
Comentario usuario
16-06-2010 16:14:08
4 5
Probe el codigo y funciona con Opera 9.51, IE 7.0.
Una lastima que no funcione con Firefox 3.0.5, si alguno sabe que cuente.
Comentario usuario
13-02-2010 02:54:44
2 5
Hola, he copiado el codigo dentro de mi web y no funciona,las tablas interiores aparecen superpuestas en la parte superior izquierda.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.