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.
Tutores.org
Mostrando Codigo - Javascript
CODIGO
# Codigo ofrecido por Tutores.org
- <div style="position:relative;left:0px;top:0px">
- <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>
- </div>
- <script type="text/javascript">
- var contenido=new Array()
- contenido[0]='Bienvenido a <a href="http://tutores.org">tutores.org</a>!'
- contenido[1]='Participa en los foros de Tutores.org <a href="http://www.tutores.org/foros">Visitar</a> '
- contenido[2]='Visita Google <a href="http://www.google.com">Visitar</a>'
- var espera=3000
- var velocidad=10
- var mensaje_actual=0
- var ancho_mensaje=0
- function cambia_contenido(){
- crosstick.style.clip="rect(0px 0px auto 0px)"
- crosstick.innerHTML=contenido[mensaje_actual]
- enciende_contenido()
- }
- function enciende_contenido(){
- var msgwidth=crosstick.offsetWidth
- if (ancho_mensaje<msgwidth){
- ancho_mensaje+=velocidad
- crosstick.style.clip="rect(0px "+ancho_mensaje+"px auto 0px)"
- beginclip=setTimeout("enciende_contenido()",20)
- }
- else{
- ancho_mensaje=0
- clearTimeout(beginclip)
- if (mensaje_actual==contenido.length-1) mensaje_actual=0
- else mensaje_actual++
- setTimeout("cambia_contenido()",espera)
- }
- }
- function start_ticking(){
- crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter
- crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement
- if (parseInt(crosstick.offsetHeight)>0)
- crosstickParent.style.height=crosstick.offsetHeight+'px'
- else
- setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake
- cambia_contenido()
- }
- if (document.all || document.getElementById)
- window.onload=start_ticking
- </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 -->
<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
daniel
23/10/2003 10.47.59
3
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