16

jquery ui スライダーを使用して div の背景の不透明度を変更しようとしています。

ユーザーは 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');        
                    $(e).css('background-color', 'rgba(255, 255, 255, '+o+')')
                });

currentColor 変数のアルファ部分のみを変更する方法が必要です。誰かが私を助けてくれることを願っています！ティア

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 Smiack によって提案された回答から学び、適応させることで、これを解決することができました。

彼の答えが元々アルファが設定されていない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

これはすでに解決されていますが、私の小さな機能が誰かを助けるかもしれません。引数として、$('a') のような jQuery 要素 (RGB または RGBA の背景色を持つ) と 0 ～ 1 のアルファ値を取ります。

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 に答える