使用帶或不帶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