我正在工作板上工作发布数量不断变化。但是,每个工作职位应该有一个基本颜色的分层阴影:#219BBE
。 这里是什么,我想实现一个草图:颜色阴影响应div的数量
我需要的是一个JavaScript函数,它改变取决于job_box
ES数量颜色的深浅。
到目前为止,我找到了一个用于生成#219BBE
色调的javascript代码片段。
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
<!-- 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:
var numBoxes = $('.job_box').length
这里是我卡住的地步。我知道我需要一个循环,但就是这样。你能把我推向正确的方向吗?
太近了!只是想知道我怎样才能增加阴影差异... – Retador
只需要用'var'来玩百分比。 – DonJuwe
这个看起来很酷:http://jsfiddle.net/5KJD7/ - 虽然它应该是相反的... – Retador