cambiar script!!!

jarel · #1 (**permalink**) 04/07/2007, 10:15

Hola a todos.
Bien, os comento, en la faq de javascript encontre este codigo

Código:

function colorHexa(c) {
	return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]);
}

function transitar(ini, fin, pasos) {
	var dato = desglose(ini);
	var rIni = dato[0];
	var gIni = dato[1];
	var bIni = dato[2];

	var intermedios = new Array(pasos);
	intermedios[0] = dato;

	var dato = desglose(fin);

	intermedios[pasos - 1] = dato;

	var rFin = dato[0];
	var gFin = dato[1];
	var bFin = dato[2];

	var rMed = (rFin - rIni) / (pasos - 1);
	var gMed = (gFin - gIni) / (pasos - 1);
	var bMed = (bFin - bIni) / (pasos - 1);

	for (var i = 1; i < pasos - 1; i ++)	{
		var rgb = new Array(3);
		rgb[0] = parseInt(rIni + (rMed * i));
		rgb[1] = parseInt(gIni + (gMed * i));
		rgb[2] = parseInt(bIni + (bMed * i));
		intermedios[i] = rgb;
	}
	for (i = 0; i < intermedios.length; i ++)
		intermedios[i] = colorHexa(intermedios[i]);

	return intermedios;
}

function desglose(color) {
	if (color.length != 6)
		return "poblema";
	else	{
		devolver = new Array(3);
		devolver[0] = hexadec(color.substr(0, 2));
		devolver[1] = hexadec(color.substr(2, 2));
		devolver[2] = hexadec(color.substr(4, 2));
	}
	return devolver;
}
var hexa = "0123456789abcdef";

function hexadec(x) {
	x = x.toLowerCase();
	return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1)))
}

Este codigo no es mas que un degradado de dos colores y estoy intentando hacer que este degradado me aparezca en horizontal (derecha a izquierda) en vez de vertical (arriba y abajo), he intentado cambiar el codigo de un par de formas pero nada. A ver si hay alguien que me pueda orientar un poco.
Gracias. Un saludo

derkenuke · #2 (**permalink**) 09/07/2007, 05:23

Te faltaba la función decahex() en el código.

Yo he hecho un div contenedor para ir insertando DIV's flotando a la izquierda en su interior. Si quieres más pasos o anchura no tienes más que modificar el argumento o la propiedad en cuestión:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
        <title> Página nueva </title> 
        <meta name="Author" content="derkeNuke"> 
        <style type="text/css"> 
        </style> 
    </head> 
 
    <body> 
 
        <script type="text/javascript"> 
 
            var hexa = "0123456789abcdef"; 
 
            function hexadec(x) { 
                x = x.toLowerCase(); 
                return parseInt(hexa.indexOf(x.charAt(0))) * 16 + parseInt(hexa.indexOf(x.charAt(1))) 
            } 
 
            function decahex(n) { 
                return hexa.charAt(n / 16) + hexa.charAt(n % 16); 
            } 
 
            function colorHexa(c) { 
                return "#" + decahex(c[0]) + decahex(c[1]) + decahex(c[2]); 
            } 
 
            function transitar(ini, fin, pasos) { 
                var dato = desglose(ini); 
                var rIni = dato[0]; 
                var gIni = dato[1]; 
                var bIni = dato[2]; 
 
                var intermedios = new Array(pasos); 
                intermedios[0] = dato; 
 
                var dato = desglose(fin); 
 
                intermedios[pasos - 1] = dato; 
 
                var rFin = dato[0]; 
                var gFin = dato[1]; 
                var bFin = dato[2]; 
 
                var rMed = (rFin - rIni) / (pasos - 1); 
                var gMed = (gFin - gIni) / (pasos - 1); 
                var bMed = (bFin - bIni) / (pasos - 1); 
 
                for (var i = 1; i < pasos - 1; i ++)    { 
                    var rgb = new Array(3); 
                    rgb[0] = parseInt(rIni + (rMed * i)); 
                    rgb[1] = parseInt(gIni + (gMed * i)); 
                    rgb[2] = parseInt(bIni + (bMed * i)); 
                    intermedios[i] = rgb; 
                } 
                for (i = 0; i < intermedios.length; i ++) 
                    intermedios[i] = colorHexa(intermedios[i]); 
 
                return intermedios; 
            } 
 
            function desglose(color) { 
                if (color.length != 6) 
                    return "poblema"; 
                else    { 
                    devolver = new Array(3); 
                    devolver[0] = hexadec(color.substr(0, 2)); 
                    devolver[1] = hexadec(color.substr(2, 2)); 
                    devolver[2] = hexadec(color.substr(4, 2)); 
                } 
                return devolver; 
            } 
 
 
 
 
            window.onload = function() { 
                var colores = transitar("00ffff", "ff0000", 30); 
                for(var i=0, capas=""; i<colores.length; i++) { 
                    capas+='<div style="width:20px; background-color:'+colores[i]+'; float:left; ">&nbsp;</div>'; 
                } 
                document.getElementById("degrad").innerHTML = capas; 
            } 
        </script> 
 
 
        <div id="degrad"></div> 
 
    </body> 
</html>

Un saludo.