如何找到jQuery之间的颜色变化
如果我有颜色#FF0CB6
和#EC9CF4
,我怎么能找到他们之间的10个变化(像一个渐变会这样做),并最终让他们在一个数组?如何找到jQuery之间的颜色变化
到类似的东西这个网站做:http://www.perbang.dk/rgbgradient/
有谁知道如何解决这个问题?
您可以使用'RainbowVis-JS'并获取两个颜色十六进制代码之间的十六进制颜色代码。
var numberOfItems = 8;
var rainbow = new Rainbow();
rainbow.setNumberRange(1, numberOfItems);
rainbow.setSpectrum('red', 'black');
var s = '';
for (var i = 1; i <= numberOfItems; i++) {
var hexColour = rainbow.colourAt(i);
s += '#' + hexColour + ', ';
}
document.write(s);
我最终与插件一起去了,正是我一直在寻找的! – Karlfromtheisland
要使用普通的JavaScript,您需要两件事。首先,您需要将HEX颜色转换为整数。我命名的函数colorStrToIntArray
:
function colorStrToIntArray(color) {
// strip '#'
if (color.length == 4 || color.length == 7) {
color = color.substr(1);
}
// for colors like '#fff'
if (color.length == 3) {
var r = parseInt(color.substr(0, 1) + color.substr(0, 1), 16),
g = parseInt(color.substr(1, 1) + color.substr(1, 1), 16),
b = parseInt(color.substr(2, 1) + color.substr(2, 1), 16);
return [r, g, b];
}
// for colors like '#ffffff'
else if (color.length == 6) {
return [
parseInt(color.substr(0, 2), 16),
parseInt(color.substr(2, 2), 16),
parseInt(color.substr(4, 2), 16)
];
}
return false;
}
在刚刚calulate整数之间的差异的第二个步骤。瞧,有你的颜色:
function calculateSteps(color1, color2, steps) {
var output = [],
start = colorStrToIntArray(color1),
end = colorStrToIntArray(color2);
var calculate = function(start, end, step) {
return (start + Math.round((end - start) * (step/(steps/2))));
};
for (var i = 0; i < steps; i++) {
var color = [0, 0, 0];
color[0] = calculate(start[0], end[0], i);
color[1] = calculate(start[1], end[1], i);
color[2] = calculate(start[2], end[2], i);
output.push(color);
}
return output;
}
该代码可能会缩短,但它的工作。 :)
我写了一个小脚本,called js.colorGradient,为自己一段时间的年龄。它计算从0%
到100%
范围内的颜色。它允许你甚至使用两种以上的颜色来制作范围。这可能不是你正在寻找的东西,但随意改变它,因为你喜欢使用它。
var gradient = new ColorGradient(["#FF0CB6", "#EC9CF4", "#0F0", "#00F"]);
for(var i = 0; i <= 100; i++) {
var color = gradient.getHexColorAtPercent(i);
$("#demo").append('<div style="background: ' + color + '">');
}
谢谢!完美的作品! – Karlfromtheisland
不客气,@Karlfromtheisland! – eisbehr
打破十六进制值在其RGB分量的颜色,然后找到范围之间等距值和转换那些都回来为十六进制。 –