16

我正在尝试使用 jquery ui 滑块更改 div 的背景不透明度。

用户可以更改 div 的背景颜色，所以我需要知道如何只更改背景的 alpha 参数而不更改颜色。

到目前为止，这是我的代码：

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');

                    var e = $('.element-active');
            var currentColor = $('.element-active').css('background-color');        
                    $(e).css('background-color', 'rgba(255, 255, 255, '+o+')')
                });

我需要了解如何仅更改 currentColor 变量的 alpha 部分。我希望有一个人可以帮助我！TIA

4

6 回答 6

16

试试这个：

var alpha = $(this).slider('value');
var e = $('.element-active');
$(e).css('background-color', 'rgba(255,255,255,' + alpha + ')');​

此处更新示例

于 2012-12-05T14:25:53.323 回答
3

字符串操作可能是最好的方法：

var e = $('.element-active');
var currentColor = $('.element-active').css('background-color');
var lastComma = currentColor.lastIndexOf(',');
var newColor = currentColor.slice(0, lastComma + 1) + o + ")";
$(e).css('background-color', newColor);
于 2012-12-05T14:40:00.837 回答
2

我设法通过使用字符串操作来学习和调整@Tom Smilack 建议的答案来解决这个问题。

我做了一个小改动，以便他的答案也适用于最初没有设置 alpha 的 div，这是我正在使用的最终代码：

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
            .bind("slidechange", function() {
                //get the value of the slider with this call
                var o = $(this).slider('value');

                var e = $('.element-active');
                var currentColor = $('.element-active').css('background-color');
                var lastComma = currentColor.lastIndexOf(')');
                var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
                $(e).css('background-color', newColor);

            });

感谢大家的建议，我希望这可以帮助想要相同功能的人

于 2012-12-05T15:33:49.420 回答
2

即使这已经解决了，也许我的小功能会帮助某人。作为参数，它需要一个 jQuery 元素，如 $('a')（具有 RGB 或 RGBA 背景颜色）和 0 - 1 的 alpha 值。

function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity
    b = e.css('backgroundColor');
    e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')');
}

你会像这样使用它：

RGBA(jQuery('a'), 0.2);

重要的部分是<a>元素已经设置了 rgb 或 rgba 背景色。

<a href="#" style="background-color: rgb(100,10,50);">Sample</a>
于 2014-10-29T14:36:03.500 回答
1

对我来说更容易理解的解决方案是用逗号分割 rgba 颜色并用新的不透明度值更改最后一个元素（当然它只有在初始颜色为 rgba 时才有效）：

var newAlpha = $(this).slider('value');
// initial background-color looks like 'rgba(255, 123, 0, 0.5)'
var initialBackgroundColor = $('.element-active').css('background-color');
var bgColorSeparated = initialBackgroundColor.split(',');
// last element contains opacity and closing bracket
// so I have to replace it with new opacity value:
bgColorSeparated[3] = newAlpha + ')';
var newColor = bgColorSeparated.join(',');
$('.element-active').css('background-color', newColor);
于 2017-09-21T12:48:33.087 回答
0

为什么你不切换具有那种颜色和不透明度的类

 $(myelement).toggleclass();

se jquery api

于 2015-09-24T00:28:23.590 回答