如何使用jquery或css更改滑块的背景颜色

时间:2011-01-14 06:14:09

标签: jquery

请您告诉我如何在滑动时使用jquery和css更改滑块的背景颜色。

我使用了方法

的.ui滑块范围{背景:colorName};

2 个答案:

答案 0 :(得分:6)

我希望这会有所帮助。

这个例子还有一个demo

$(document).ready(function() {
    $('.slide').slider({
        slide: function(event, ui) {
            // from pure red to pure green
            var r, g, b = 0;
            g = Math.round(255 / 100 * ui.value); // 2.55 * (0 - 100) = 0 - 255
            r = 255 - g;
            var color = 'rgb(' + r + ',' + g + ',' + b + ')';
            $(this).css({
                'background': color
            });
        }
    });
});

你可以在某处找到颜色线的算法;-)我刚刚编写了这个算法。

P.S。我在演示中添加了另一个“算法”; - )

答案 1 :(得分:0)

这可能很有用。它使用JQuery来改变css。在我的情况下,我的所有尝试都是在滑块所在的实际DIV上设置CSS失败了吗?我想JQuery CSS库优先?这似乎过度杀戮。但这对我有用。

    var cs_style = "<style>#your_slider_div .ui-widget-header { background: #7D1515; } </style>";
    $('html > head').append(cs_style);

运行此选项滑块的jQuery函数(定义和调用)会将背景颜色设置为深红色。当然,您可以将其设置为您喜欢的任何地方。破解坚果的方法不止一种吗?