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

Javascript - Scroll de texto iluminado

Códigos Javascript

Practico efecto scroll que muestra textos en formato html con efecto iluminado. Muy util para noticias o llamar la atencion de los visitantes.
Visitas: 22,580 - 12/10/2003 23:04:26
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
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. <div style="position:relative;left:0px;top:0px">
  2. <span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span>
  3. </div>
  4. <script type="text/javascript">
  5. var contenido=new Array()
  6. contenido[0]='Bienvenido a  <a href="http://tutores.org">tutores.org</a>!'
  7. contenido[1]='Participa en los foros de Tutores.org <a href="http://www.tutores.org/foros">Visitar</a> '
  8. contenido[2]='Visita Google <a href="http://www.google.com">Visitar</a>'
  9. var espera=3000
  10. var velocidad=10
  11. var mensaje_actual=0
  12. var ancho_mensaje=0
  13. function cambia_contenido(){
  14. crosstick.style.clip="rect(0px 0px auto 0px)"
  15. crosstick.innerHTML=contenido[mensaje_actual]
  16. enciende_contenido()
  17. }
  18. function enciende_contenido(){
  19. var msgwidth=crosstick.offsetWidth
  20. if (ancho_mensaje<msgwidth){
  21. ancho_mensaje+=velocidad
  22. crosstick.style.clip="rect(0px "+ancho_mensaje+"px auto 0px)"
  23. beginclip=setTimeout("enciende_contenido()",20)
  24. }
  25. else{
  26. ancho_mensaje=0
  27. clearTimeout(beginclip)
  28. if (mensaje_actual==contenido.length-1) mensaje_actual=0
  29. else mensaje_actual++
  30. setTimeout("cambia_contenido()",espera)
  31. }
  32. }
  33. function start_ticking(){
  34. crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
  35. crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
  36. if (parseInt(crosstick.offsetHeight)>0)
  37. crosstickParent.style.height=crosstick.offsetHeight+'px'
  38. else
  39. setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
  40. cambia_contenido()
  41. }
  42. if (document.all || document.getElementById)
  43. window.onload=start_ticking
  44. </script>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Scroll de texto iluminado" href="http://www.tutores.org/codigo/704/" target="_blank">Scroll de texto iluminado</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
23/10/2003 10.47.59
2 5
Amigo le agradezco haya publicado este script porque era lo que andaba buscando. Ya lo estoy utilizando, pero tuve que modificarle el style y le coloqué uno que ya tenía preparado. Al hacer esto me quedó justo en la posición que deseaba, pero con el detalle de que perdió el efecto scroll cuando le quité el atributo "position:absolute" :( Es que el texto va insertado en una tabla y fue necesario quitarlo... Ahora me ha quedado el texto aleatorio pero sin el efecto scroll. ¿Que puedo hacer en este caso?
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.