颜色深浅响应div的数量 [英] Color shades responsive to number of divs
问题描述
我在一个工作板上工作,总是改变工作量。然而,每个职位发布应该有一个基本颜色的分层阴影:#219BBE
。
这是我想要实现的草图:
I am working on a job board with an always changing quantity of job postings. However each job posting should have a tiered shade of one base color: #219BBE
.
Here is a sketch of what I am trying to achieve:
我需要的是一个javascript函数,它根据<$ c $的数量更改颜色的阴影c> job_box es。
What I need is a javascript function which changes the shade of a color depending on the number of job_box
es.
到目前为止,我发现了一个javascript代码片段,用于生成#219BBE
。
So far I found a javascript snippet for generating the shades of #219BBE
.
function calculateShades(colorValue) {
"#219BBE" = colorValue;
// break the hexadecimal color value into R, G, B one-byte components
// and parse into decimal values.
// calculate a decrement value for R, G, and B based on 10% of their
// original values.
var red = parseInt(colorValue.substr(0, 2), 16);
var redDecrement = Math.round(red*0.1);
var green = parseInt(colorValue.substr(2, 2), 16);
var greenDecrement = Math.round(green*0.1);
var blue = parseInt(colorValue.substr(4, 2), 16);
var blueDecrement = Math.round(blue*0.1);
var shadeValues = [];
var redString = null;
var greenString = null;
var blueString = null;
for (var i = 0; i < 10; i++) {
redString = red.toString(16); // convert red to hexadecimal string
redString = pad(redString, 2); // pad the string if needed
greenString = green.toString(16); // convert green to hexadecimal string
greenString = pad(greenString, 2); // pad the string if needed
blueString = blue.toString(16); // convert blue to hexadecimal string
blueString = pad(blueString, 2); // pad the string if needed
shadeValues[i] = redString + greenString + blueString;
// reduce the shade towards black
red = red - redDecrement;
if (red <= 0) {
red = 0;
}
green = green - greenDecrement;
if (green <= 0) {
green = 0;
}
blue = blue - blueDecrement;
if (blue <= 0) {
blue = 0;
}
}
shadeValues[10] = "000000";
return shadeValues;
}
我简化了这个问题的输出:
HTML
I simplified the output for this problem: HTML
<!-- Instead of 4 boxes we could also have n boxes -->
<div class="job_box"></div>
<div class="job_box"></div>
<div class="job_box"></div>
<div class="job_box"></div>
CSS
.job_box {
width: 100%;
height: 50px;
/* The dynamic background-color */
background-color: #219BBE;
}
要计算 job_box
es我将使用jQuery:
To count the quantity of job_box
es I would use jQuery:
var numBoxes = $('.job_box').length
这里是我被困住的地方。我知道我需要一个循环,但这是它。请你向正确的方向推我吗?
And here is the point where I am stuck. I know that I need a loop but that's it. Can you please push me in the right direction?
推荐答案
这是我的解决方案: DEMO
var n = 0;
$('.job_box').each(function() {
n++;
lighten($(this), n);
});
function lighten(that, n) {
var lightenPercent = 15 / n;
var rgb = that.css('background-color');
rgb = rgb.replace('rgb(', '').replace(')', '').split(',');
var red = $.trim(rgb[0]);
var green = $.trim(rgb[1]);
var blue = $.trim(rgb[2]);
red = parseInt(red * (100 - lightenPercent) / 100);
green = parseInt(green * (100 - lightenPercent) / 100);
blue = parseInt(blue * (100 - lightenPercent) / 100);
rgb = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
that.css('background-color', rgb);
}
另一方面,您可以通过更改 /
到 *
。
You can, on the other hand, darken your base color by changing the /
to *
when setting the var for percent.
这篇关于颜色深浅响应div的数量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!