jquery - 使用 jQuery Mobile Slider 制作动画颜色

Question

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

我真正需要做的是随着 slider 值的增加将颜色从橙色淡化为粉红色。完全橙色为 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

执行此操作的最简单方法是标准化 slider 值(在本例中除以 10)，将两个 RGB 值(橙色和粉红色)之间的差异乘以该标准化值，然后将其添加到基本 RGB值(粉红色)。

它是 super 基础的，可能有更好的方法来实现它……但它看起来不错而且很有效。这是我的代码版本:

// 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 .干杯!