//-----------------------------------------------------//
//-------------------- degradee.js --------------------//
//-----------------------------------------------------//
// Função para conversão da parte literal do hexadecimal em decimal
function converter(value) {
value = value.toUpperCase();
switch(value) {
case "A": return 10;
case "B": return 11;
case "C": return 12;
case "D": return 13;
case "E": return 14;
case "F": return 15;
default: return value;
}
}
// Transformação da cor passada para decimal
function hexToDec(color) {
if(color.indexOf("#") > -1)
color = color.substr((color.indexOf("#") + 1), color.length);
if(color.length >= 6) {
hexRed = color.substr(0, 2);
hexGreen = color.substr(2, 2);
hexBlue = color.substr(4, 2);
// Para IE
// Se não houver a divisão da string em array, causa erro
hexRed = hexRed.split("");
hexGreen = hexGreen.split("");
hexBlue = hexBlue.split("");
hexRed = ((converter(hexRed[0]) * 16) + (converter(hexRed[1]) * 1));
hexGreen = ((converter(hexGreen[0]) * 16) + (converter(hexGreen[1]) * 1));
hexBlue = ((converter(hexBlue[0]) * 16) + (converter(hexBlue[1]) * 1));
}
else if(color.length >= 3) {
hexRed = color.substr(0, 1);
hexGreen = color.substr(1, 1);
hexBlue = color.substr(2, 1);
hexRed = (converter(hexRed) * 16);
hexGreen = (converter(hexGreen) * 16);
hexBlue = (converter(hexBlue) * 16);
}
else {
hexRed = 0;
hexGreen = 0;
hexBlue = 0;
}
return [hexRed, hexGreen, hexBlue];
}
// Verifica se o valor é hexadecimal ou não
function isHex(value) {
validChars = "0123456789ABCDEF";
for(i = 0; i < value.length; i++) {
if(validChars.indexOf(value.toUpperCase().charAt(i)) < 0)
return false;
else
return true;
}
}
// Exibe o degradee
function showScalingColor(iniColor, endColor, local, height, width) {
// Verifica se os valores passados são hexadecimais
iniColor = (isHex(iniColor)) ? hexToDec(iniColor) : hexToDec("#FFFFFF");
endColor = (isHex(endColor)) ? hexToDec(endColor) : hexToDec("#000000");
// Define a altura e largura da barra com o degradeè
nHeight = (height) ? height : "2";
nWidth = (width) ? width : "200";
// Cria a tabela e a linha da tabela, definindo as propriedades
table = window.document.createElement("table");
table.border = "0";
table.cellPadding = "0";
table.cellSpacing = "0";
table.style.width = nWidth;
table.style.height = nHeight;
tr = window.document.createElement("tr");
// Cria as células com as cores de fundo em degradeè
while(iniColor[0] != endColor[0] || iniColor[1] != endColor[1] || iniColor[2] != endColor[2]) {
td = window.document.createElement("td");
td.style.background = "rgb(" + iniColor[0] + "," + iniColor[1] + "," + iniColor[2] + ")";
tr.appendChild(td);
if(iniColor[0] > endColor[0]) iniColor[0]--;
else if(iniColor[0] < endColor[0]) iniColor[0]++;
if(iniColor[1] > endColor[1]) iniColor[1]--;
else if(iniColor[1] < endColor[1]) iniColor[1]++;
if(iniColor[2] > endColor[2]) iniColor[2]--;
else if(iniColor[2] < endColor[2]) iniColor[2]++;
}
// Adiciona a linha com as células na tabela
table.appendChild(tr);
// Adiciona a tabela na página
if(local)
window.document.getElementById(local).appendChild(table);
else
window.document.body.appendChild(table)
}
//---------------------------------------------------------------//
//-------------------- Exemplo de utilização --------------------//
//---------------------------------------------------------------//
Dégradée