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.