javascript - 使用 jquery slider 更改过滤器模糊值

Question

我正在使用 jquery slider 更改我正在处理的网站的 css 值。我想添加滤镜模糊效果，用户可以在其中选择图像所需的模糊量，但我无法弄清楚如何将值附加到模糊('')，以下是代码和 JS Fiddle link .

$('#slider').slider({
value: 1,
slide: handleSliderChange
});
function handleSliderChange(event, slider){
$('#vardiv').css('filter: blur();',slider.value + 'px');
$("#vardivText").text(slider.value + 'px');   
}

提前致谢。

Answer 1

你的 jQuery.css调用不正确。此外，jQuery 不会自动为 filter 属性添加 vendor 前缀(可能是因为它最初是一个非标准的 MS 属性)，因此您必须明确指定它们。

Example

$('#slider').slider({
    value: 1,
    slide: handleSliderChange
});

function handleSliderChange(event, slider){
    var blurValue = 'blur(' + slider.value + 'px)';
    $('#vardiv').css({
        '-webkit-filter': blurValue,
           '-moz-filter': blurValue,
            '-ms-filter': blurValue,
             '-o-filter': blurValue,
                'filter': blurValue,
    });

    $("#vardivText").text(slider.value + 'px');   
}