Javascript - Texto cambia de color letra a letra
Códigos Javascript
Bonito efecto para tu pagina con el que cambiamos el color de las letras una a una
Tutores.org
Mostrando Codigo - Javascript
EXPLICACION
El Script esta comentado
CODIGO
# Codigo ofrecido por Tutores.org
- <html>
- <head>
- <title>Tutores.org</title>
- </head>
- <BODY bgcolor="#333333">
- <SCRIPT LANGUAGE="JavaScript">
- <!-- Codigo ofrecido por tutores.org
- text = "www.Tutores.org"; // el texto principal
- color1 = "white"; // Color original del texto
- color2 = "blue"; // El color del efecto
- fontsize = "8"; // Tamaño del texto en pixeles
- speed = 200; // Velocidad del texto en milisegundos 1000 milisegundos = 1 segundo
- i = 0;
- if (navigator.appName == "Netscape") {
- document.write("<layer id=a visibility=show></layer><br><br><br>");
- }
- else {
- document.write("<div id=a></div>");
- }
- function changeCharColor() {
- if (navigator.appName == "Netscape") {
- document.a.document.write("<center><font size =" + fontsize + "><font color=" + color1 + ">");
- for (var j = 0; j < text.length; j++) {
- if(j == i) {
- document.a.document.write("<font color=" + color2 + ">" + text.charAt(i) + "</font>");
- }
- else {
- document.a.document.write(text.charAt(j));
- }
- }
- document.a.document.write('</font></font></center>');
- document.a.document.close();
- }
- if (navigator.appName == "Microsoft Internet Explorer") {
- str = "<center><font size=" + fontsize + "><font color=" + color1 + ">";
- for (var j = 0; j < text.length; j++) {
- if( j == i) {
- str += "<font color=" + color2 + ">" + text.charAt(i) + "</font>";
- }
- else {
- str += text.charAt(j);
- }
- }
- str += "</font></font></center>";
- a.innerHTML = str;
- }
- (i == text.length) ? i=0 : i++; // Volvemos a la primera letra
- }
- setInterval("changeCharColor()", speed);
- // fin-->
- </script>
- <p>
- </body>
- </html>
ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Texto cambia de color letra a letra" href="http://www.tutores.org/codigo/560/" target="_blank">Texto cambia de color letra a letra</a>
<!-- Final enlace Tutores.org -->
<a title="Tutores.org - Texto cambia de color letra a letra" href="http://www.tutores.org/codigo/560/" target="_blank">Texto cambia de color letra a letra</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS