我不确定标题是否能解释清楚,但可能不是!
无论如何,我有50个div,我想将背景颜色从白色设置为深黄色。第一个div是白色的,最后一个是深黄色的。
白色的RGB值为255,255,255,深黄色的RGB值为227,151,4
我怎么才能用javascript (jQuery)遍历每个div,让它逐渐变暗呢?
这是一个屏幕截图

非常感谢
发布于 2012-08-15 00:47:51
var divs = $('div'),
len = divs.length;
var targ_R = 227,
targ_G = 151,
targ_B = 4,
inc_R = (255 - targ_R) / len,
inc_G = (255 - targ_G) / len,
inc_B = (255 - targ_B) / len;
divs.css("backgroundColor", function(i, curr) {
return "#" + toHex(255 - (i * inc_R)) +
toHex(255 - (i * inc_G)) +
toHex(255 - (i * inc_B));
});
function toHex(n) {
var h = (~~n).toString(16);
if (h.length < 2)
h = "0" + h;
return h;
}演示: http://jsfiddle.net/RSyCM/
发布于 2012-08-15 00:39:09
试试这个-
var r, g, b;
for (var i = 0, count = $("div").length; i < count; i++) {
r = 255 - i * 3;
g = 255 - i * 10;
b = 255 - i * 25;
$("div").eq(i).css("background", "rgb(" + r + ", " + g + ", " + b + ")");
}更新
将最后一个设为rgb(227, 151, 4) -
发布于 2012-08-15 05:30:59
以下是使用pusher.color library的Zoltan Toth答案的一个变体,以防您希望使用库来处理解析和混合。
var color0 = pusher.color('white');
var color1 = pusher.color('rgb', 227, 151, 4);
for (var i = 0, count = $("div").length; i < count; i++) {
var amount = i / (count-1);
var result = color0.blend(color1, amount);
$("div").eq(i).css("background", result.html());
}
https://stackoverflow.com/questions/11956707
复制相似问题