1

id=sample grayscale(0.6) と blur(5px) を持つ要素を作るために以下のコードを書きました。しかし、後者の -webkit-filter プロパティは、前のものに追加するのではなく、代わりに使用することがわかりました。毎回追加できる -webkit-filter プロパティは 1 つだけです。ぼかしをグレースケールに追加することは可能ですか? 最新のクロムを使用していることを明確にしてください。そのため、ナビゲーターで -webkit-filter が機能します。

$('#grayscale').click(function() {
    $('#sample').css({"-webkit-filter" : "grayscale(0.6)"})
});
$('#blur').click(function() {
    $('#sample').css({"-webkit-filter" : "blur(5px)"})
});
4

3 に答える 3

0

あなたの最善の選択肢は、一般的なコントローラーを使用することだと思います。このようにして、グレースケールとぼかしに異なる値を適用できます。理想的には、要素をクリックするだけでなく、入力を使用して行う必要があります。このようなもの：

var gValue = 0;
var bValue = 0;
$('#grayscale').click(function() {
    gValue= 0.6;
    change();
});
$('#blur').click(function() {
    bValue = 0.5;
    change();
});

function change(){
   var filter = "grayscale(" + gValue + ") blur(" + bValue + ")";
   $('#sample').css("webkitFilter", filter});
}
于 2016-04-15T10:13:04.983 に答える
0

既存のフィルターに追加 (または削除) するだけです。

$('#grayscale').on('click', function() {
    var $sample = $('#sample');
    var new_filter = "grayscale(0.6)"; 
    var old_filter = $sample.css("-webkit-filter");
    if(old_filter.indexOf(new_filter) == -1){
        $sample.css("-webkit-filter", old_filter + ' ' + new_filter);
    }
    else {
        $sample.css("-webkit-filter", old_filter.replace(new_filter, ''));
    }
});

http://jsfiddle.net/zzmJR/

于 2013-01-24T01:19:58.893 に答える