Question

目前，我正在使用范围为0到10的范围滑块将背景颜色的不透明度从0更改为1.这很容易理解。

当滑块增加值时，我真正需要做的是将颜色从橙色淡化为粉红色。完全橙色为0，完全粉红色为10，对其间的所有间隔具有淡化/补间效果。我对如何实现这一点感到茫然。

这就是我现在所拥有的：

$("#slider").change(function() {

    sVal = $(this).val();

    $(this).next().css("background-color", "rgba(217,80,160," + (sVal * 0.1) + ")");

});

我的演示在这里： http://jsfiddle.net/kSP5P/

Answer 1

最简单的方法是标准化滑块值（在这种情况下除以10），将两个RGB值（橙色和粉红色）之间的差值乘以此标准化值，并将其添加到基本RGB值（粉红色）。

这是超级基础，可能有更好的方法来做到这一点......但它看起来很好而且有效。这是我的代码版本：

// RGB values for orange
orangeR = 255;
orangeG = 165;
orangeB = 0;

// RGB values for pink
pinkR = 217;
pinkG = 80;
pinkB = 160;

$("#slider").change(function() {

    // Normalize the slider value (between 0 and 1)
    sVal = $(this).val() / 10.0;

    // Calculated RGB values for our slider
    currentR = parseInt(pinkR + (orangeR - pinkR) * sVal);
    currentG = parseInt(pinkG + (orangeG - pinkG) * sVal);
    currentB = parseInt(pinkB + (orangeB - pinkB) * sVal);

    // Set the slider background color
    $(this).next().css("background-color", "rgb(" + currentR + "," + currentG + "," + currentB + ")");

});

......和a modified version of your fiddle。干杯！

使用jQuery Mobile Slider动画颜色

1 个答案: