首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery如何用RGB制作调色板?

jQuery如何用RGB制作调色板?
EN

Stack Overflow用户
提问于 2012-08-15 00:27:22
回答 3查看 1.8K关注 0票数 1

我不确定标题是否能解释清楚,但可能不是!

无论如何,我有50个div,我想将背景颜色从白色设置为深黄色。第一个div是白色的,最后一个是深黄色的。

白色的RGB值为255,255,255,深黄色的RGB值为227,151,4

我怎么才能用javascript (jQuery)遍历每个div,让它逐渐变暗呢?

这是一个屏幕截图

非常感谢

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-08-15 00:47:51

代码语言:javascript
复制
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/

票数 3
EN

Stack Overflow用户

发布于 2012-08-15 00:39:09

试试这个-

代码语言:javascript
复制
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) -

票数 2
EN

Stack Overflow用户

发布于 2012-08-15 05:30:59

以下是使用pusher.color library的Zoltan Toth答案的一个变体,以防您希望使用库来处理解析和混合。

代码语言:javascript
复制
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());
}

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11956707

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档