如何使用javascript从渐变百分比中获取颜色值？

我有一个固定的宽度div,使用css应用渐变.我想基于此渐变构建基于滑块的颜色选择器.

当我拖动滑块我计算百分比位置,我想得到基于此值的十六进制或rgb颜色代码.

我的想法是创建一个定义了开始/停止位置和颜色的数组,然后根据滑块位置从这个数组中找到两个值,然后以某种方式找到它之间的颜色：这是我无法前进的地方.

演示：http://jsfiddle.net/pdu8rpfv/

var gradient = [
    [
        0,
        'ff0000'
    ],
    [
        28,
        '008000'
    ],
    [
        72,
        '0000ff'
    ],
    [
        100,
        'ff0000'
    ]
];
$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {

        var colorRange = []
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });

        $('#result').css("background-color", 'red');

    }
});

解决方法:

我能够使用此函数解决此问题,该函数基于less.js函数：http://lesscss.org/functions/#color-operations-mix

function pickHex(color1, color2, weight) {
    var w1 = weight;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}

我只需要传递渐变阵列中两个最接近的颜色代码以及滑块手柄所处的比例(可以借助滑块宽度轻松计算).这是现场的例子：

http://jsfiddle.net/vksn3yLL/

标签：linear-gradients,javascript,jquery,css,colors
来源： https://codeday.me/bug/20191004/1853508.html