使用带或不带Jquery的javascript，我需要根据开始和结束颜色创建颜色渐变。这是可能的编程方式吗？Javascript颜色渐变
最终颜色只会是开始颜色的阴影，它是无序列表，我无法控制li项目的数量。我正在寻找一种解决方案，使我可以选择开始和结束颜色，将十六进制值转换为RGB，以便在代码中进行操作。开始的RGB值会根据项目数计算的步长值增加。
因此，如果列表中有8个项目，那么它需要以8个步骤增加单独的红绿蓝值以实现最终颜色。有没有更好的方法来做到这一点，如果是的话，我可以在哪里找到一些示例代码？
是的，绝对。
我在Java中这样做，在JavaScript中也应该很简单。
首先，您需要将颜色分解为RGB组件。
然后计算组件的开始和结束之间的差异。
最后，计算百分比差异并乘以每个组件的起始颜色，然后将其添加到起始颜色。
假设你可以得到的RGB值，这应该这样做：
var diffRed = endColor.red - startColor.red;
var diffGreen = endColor.green - startColor.green;
var diffBlue = endColor.blue - startColor.blue;
diffRed = (diffRed * percentFade) + startColor.red;
diffGreen = (diffGreen * percentFade) + startColor.green;
diffBlue = (diffBlue * percentFade) + startColor.blue;
的“percentFade”是一个浮动的小数，表示多远消失在“ENDCOLOR”。 1将会完全消失（从而创建最终颜色）。 0将不会褪色（起始颜色）。
第二组赋值是新颜色集合 – alxndr 2012-02-16 03:18:44
您可以检索元素列表。我不熟悉jQuery，但prototypejs有Element.childElements（），它将返回一个数组。一旦知道了阵列的长度，就可以确定为每个步骤更改像素分量的数量。下面的一些代码我没有用我正在演示的表单进行测试，但它应该有希望给你一个想法。
function hex (c) {
var s = "abcdef";
var i = parseInt (c);
if (i == 0 || isNaN (c))
return "00";
i = Math.round (Math.min (Math.max (0, i), 255));
return s.charAt ((i - i % 16)/16) + s.charAt (i % 16);
}
/* Convert an RGB triplet to a hex string */
function convertToHex (rgb) {
return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
}
/* Remove '#' in color hex string */
function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s }
/* Convert a hex string to an RGB triplet */
function convertToRGB (hex) {
var color[];
color[0] = parseInt ((trim(hex)).substring (0, 2), 16);
color[1] = parseInt ((trim(hex)).substring (2, 4), 16);
color[2] = parseInt ((trim(hex)).substring (4, 6), 16);
}
/* The start of your code. */
var start = convertToRGB ('#000000'); /* The beginning of your gradient */
var end = convertToRGB ('#ffffff'); /* The end of your gradient */
var arr = $('.gradientList').childElements();
var len = arr.length(); /* The number of colors to compute */
var alpha = 0.5; /* Alpha blending amount */
for (i = 0; i < len; i++) {
var c = [];
c[0] = start[0] * alpha + (1 - alpha) * end[0];
c[1] = start[1] * alpha + (1 - alpha) * end[1];
c[2] = start[2] * alpha + (1 - alpha) * end[2];
/* Set the background color of this element */
arr[i].setStyle ({ 'background-color': convertToHex (c) });
}
考虑用简单的'
这里有很多错误。例如convertToRGB并不实际返回任何东西:) – 2011-10-26 22:57:43
我创建了一个JS库，RainbowVis-JS来解决这个一般问题。您只需使用setNumberRange来设置项目数，并使用setSpectrum设置开始和结束颜色。然后你得到与colourAt十六进制颜色代码。
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);
// gives:
// #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000,
欢迎您来看看图书馆的源代码。 :)
完美！这正是我所期待的。谢谢 – 2012-09-19 07:41:34
这是一个非常有用的脚本，很好的工作。 – 2012-11-27 12:49:55
谢谢，非常有帮助。将其用于即将在伊朗举行的选举。 ;） – pp19dd 2013-05-15 17:17:29
不是这样强大，但在大多数情况下工作，你不必包括除了jQuery的任何其他库下面的代码：
HTML：
<div id="colors"></div>
的JavaScript：
function rainbow(value, s, l, max, min, start, end) {
value = ((value - min) * (start - end)/max)+end;
return 'hsl(' + value + ','+s+'%,'+l+'%)';
}
function createRainbowDiv(start,end){
var gradient = $("<div>").css({display:"flex", "flex-direction":"row",height:"100%"});
for (var i = start; ((i <= end) && (i >= start)) || ((i >= end) && (i <= start));
i += (end-start)/Math.abs(end-start)){
gradient.append($("<div>").css({float:"left","background-color":rainbow(i, 100,50, Math.max(start,end), Math.min(start,end), start,end),flex:1}));
}
return gradient;
}
$("#colors").append(createRainbowDiv(0,150));
$("#colors").css("width","100%").css("height","10px");
这应该使包含彩虹的div。见http://jsfiddle.net/rootandy/54rV7/
我使用基于@desau回答这个功能：
getGradientColor = function(start_color, end_color, percent) {
// strip the leading # if it's there
start_color = start_color.replace(/^\s*#|\s*$/g, '');
end_color = end_color.replace(/^\s*#|\s*$/g, '');
// convert 3 char codes --> 6, e.g. `E0F` --> `EE00FF`
if(start_color.length == 3){
start_color = start_color.replace(/(.)/g, '$1$1');
}
if(end_color.length == 3){
end_color = end_color.replace(/(.)/g, '$1$1');
}
// get colors
var start_red = parseInt(start_color.substr(0, 2), 16),
start_green = parseInt(start_color.substr(2, 2), 16),
start_blue = parseInt(start_color.substr(4, 2), 16);
var end_red = parseInt(end_color.substr(0, 2), 16),
end_green = parseInt(end_color.substr(2, 2), 16),
end_blue = parseInt(end_color.substr(4, 2), 16);
// calculate new color
var diff_red = end_red - start_red;
var diff_green = end_green - start_green;
var diff_blue = end_blue - start_blue;
diff_red = ((diff_red * percent) + start_red).toString(16).split('.')[0];
diff_green = ((diff_green * percent) + start_green).toString(16).split('.')[0];
diff_blue = ((diff_blue * percent) + start_blue).toString(16).split('.')[0];
// ensure 2 digits by color
if(diff_red.length == 1) diff_red = '0' + diff_red
if(diff_green.length == 1) diff_green = '0' + diff_green
if(diff_blue.length == 1) diff_blue = '0' + diff_blue
return '#' + diff_red + diff_green + diff_blue;
};
例子：
getGradientColor('#FF0000', '#00FF00', 0.4);
=> "#996600"
正确的函数生成的颜色阵！
function hex (c) {
var s = "abcdef";
var i = parseInt (c);
if (i == 0 || isNaN (c))
return "00";
i = Math.round (Math.min (Math.max (0, i), 255));
return s.charAt ((i - i % 16)/16) + s.charAt (i % 16);
}
/* Convert an RGB triplet to a hex string */
function convertToHex (rgb) {
return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
}
/* Remove '#' in color hex string */
function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s }
/* Convert a hex string to an RGB triplet */
function convertToRGB (hex) {
var color = [];
color[0] = parseInt ((trim(hex)).substring (0, 2), 16);
color[1] = parseInt ((trim(hex)).substring (2, 4), 16);
color[2] = parseInt ((trim(hex)).substring (4, 6), 16);
return color;
}
function generateColor(colorStart,colorEnd,colorCount){
\t // The beginning of your gradient
\t var start = convertToRGB (colorStart);
\t // The end of your gradient
\t var end = convertToRGB (colorEnd);
\t // The number of colors to compute
\t var len = colorCount;
\t //Alpha blending amount
\t var alpha = 0.0;
\t var saida = [];
\t
\t for (i = 0; i < len; i++) {
\t \t var c = [];
\t \t alpha += (1.0/len);
\t \t
\t \t c[0] = start[0] * alpha + (1 - alpha) * end[0];
\t \t c[1] = start[1] * alpha + (1 - alpha) * end[1];
\t \t c[2] = start[2] * alpha + (1 - alpha) * end[2];
\t \t saida.push(convertToHex (c));
\t \t
\t }
\t
\t return saida;
\t
}
// Exemplo de como usar
var tmp = generateColor('#000000','#ff0ff0',10);
for (cor in tmp) {
$('#result_show').append("<div style='padding:8px;color:#FFF;background-color:#"+tmp[cor]+"'>COLOR "+cor+"° - #"+tmp[cor]+"</div>")
}
\t<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result_show"></div>我需要创建的颜色选择一个足够大的阵列未知组动态的元素，但我需要每一个元素来增加通过开始彩色了路，终点颜色。这种方式遵循“百分比淡化”的方法，除了我遵循逻辑之后的困难时间。这就是我使用两个rgb颜色值的输入并计算页面上元素的数量的方法。
这是一个link to a codepen，它演示了这个概念。
下面是问题的代码片段。
<style>
#test {
width:200px;
height:100px;
border:solid 1px #000;
}
.test {
width:49%;
height:100px;
border:solid 1px #000;
display: inline-block;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<script>
var GColor = function(r,g,b) {
r = (typeof r === 'undefined')?0:r;
g = (typeof g === 'undefined')?0:g;
b = (typeof b === 'undefined')?0:b;
return {r:r, g:g, b:b};
};
// increases each channel by the difference of the two
// divided by 255 (the number of colors stored in the range array)
// but only stores a whole number
// This should respect any rgb combinations
// for start and end colors
var createColorRange = function(c1) {
var colorList = [], tmpColor, rr = 0, gg = 0, bb = 0;
for (var i=0; i<255; i++) {
tmpColor = new GColor();
if (rExp >= 0) {
tmpColor.r = Math.floor(c1.r - rr);
rr += rAdditive;
} else {
tmpColor.r = Math.floor(c1.r + rr);
rr += rAdditive;
}
if (gExp >= 0) {
tmpColor.g = Math.floor(c1.g - gg);
gg += gAdditive;
} else {
tmpColor.g = Math.floor(c1.g + gg);
gg += gAdditive;
}
if (bExp >= 0) {
tmpColor.b = Math.floor(c1.b - bb);
bb += bAdditive;
} else {
tmpColor.b = Math.floor(c1.b + bb);
bb += bAdditive;
}
console.log(tmpColor);
colorList.push(tmpColor);
}
return colorList;
};
/* ==================
Testing Code Below
================== */
var firstColor = new GColor(255, 24, 0);
var secondColor = new GColor(255, 182, 0);
// Determine the difference
var rExp = firstColor.r - secondColor.r;
// Divide that difference by length of the array
// you would like to create (255 in this case)
var rAdditive = Math.abs(rExp)/255;
var gExp = firstColor.g - secondColor.g;
var gAdditive = Math.abs(gExp)/255;
var bExp = firstColor.b - secondColor.b;
var bAdditive = Math.abs(bExp)/255;
var range = createColorRange(firstColor, secondColor);
console.log(range);
var pointer = 0;
// This gently cycles through
// all the colors on a single element
function rotateColors() {
var currentColor = range[pointer];
document.getElementById("test").style.backgroundColor = "rgb("+currentColor.r+","+currentColor.g+","+currentColor.b+")";
pointer++;
if (pointer < range.length) window.setTimeout(rotateColors, 5);
}
rotateColors();
// say I have 5 elements
// so I need 5 colors
// I already have my first and last colors
// but I need to locate the colors between
// my start color and my end color
// inside of this range
// so I divide the range's length by the
// number of colors I need
// and I store the index values of the middle values
// those index numbers will then act as my keys to retrieve those values
// and apply them to my element
var myColors = {};
var objects = document.querySelectorAll('.test');
myColors.num = objects.length;
var determineColors = function(numOfColors, colorArray) {
var colors = numOfColors;
var cRange = colorArray;
var distance = Math.floor(cRange.length/colors);
var object = document.querySelectorAll('.test');
var j = 0;
for (var i = 0; i < 255; i += distance) {
if ((i === (distance*colors))) {
object[j].style.backgroundColor = "rgb(" + range[255].r + ", " + range[255].g + ", " + range[255].b + ")";
j = 0;
// console.log(range[i]);
} else {
// Apply to color to the element
object[j].style.backgroundColor = "rgb(" + range[i].r + ", " + range[i].g + ", " + range[i].b + ")";
// Have each element bleed into the next with a gradient
// object[j].style.background = "linear-gradient(90deg, rgb(" + range[i].r + ", " + range[i].g + ", " + range[i].b + "), rgb(" + range[i+distance].r + ", " + range[i+distance].g + ", " + range[i+distance].b + "))";
j++;
}
}
};
setTimeout(determineColors(myColors.num, range), 2000);
</script>
</body>
xolor library具有渐变功能。这将创建与8种颜色中的梯度从起始颜色数组结束颜色：
var gradientColors = []
var startColor = "rgb(100,200,50)", endColor = "green"
var start = xolor(startColor)
for(var n=0; n<8; n++) {
gradientColors.push(start.gradient(endColor, n/8))
}
详见在github：https://github.com/fresheneesz/xolor
desau's answer是很大的。这是在javascript：
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function map(value, fromSource, toSource, fromTarget, toTarget) {
return (value - fromSource)/(toSource - fromSource) * (toTarget - fromTarget) + fromTarget;
}
function getColour(startColour, endColour, min, max, value) {
var startRGB = hexToRgb(startColour);
var endRGB = hexToRgb(endColour);
var percentFade = map(value, min, max, 0, 1);
var diffRed = endRGB.r - startRGB.r;
var diffGreen = endRGB.g - startRGB.g;
var diffBlue = endRGB.b - startRGB.b;
diffRed = (diffRed * percentFade) + startRGB.r;
diffGreen = (diffGreen * percentFade) + startRGB.g;
diffBlue = (diffBlue * percentFade) + startRGB.b;
var result = "rgb(" + Math.round(diffRed) + ", " + Math.round(diffGreen) + ", " + Math.round(diffBlue) + ")";
return result;
}
function changeBackgroundColour() {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var newColour = getColour("#00FF00", "#FF0000", 0, 200, count);
document.body.style.backgroundColor = newColour;
}, 20);
}
changeBackgroundColour();
你描述的是我会做的方式：只需做起点和终点之间的线性插值为三个颜色分量。 – Pointy 2010-06-20 18:37:43
请注意，有不同类型的渐变：如果您要制作经过红色 - >黄色 - >绿色 - >蓝色的渐变，您可能需要获取HSL值而不是RGB值。 – vaab 2012-11-14 08:46:32