background-blur-plugin

Background Blur是一个超小,跨浏览器的图像模糊jQuery插件,它几乎支持所有的浏览器。

HTML(包含需要模糊的图像容器)


<div id='some-element'></div>

JS(在该容器中创建模糊图像)


$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
});
创建模糊图像并增加淡入淡出效果

$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});
创建模糊图像并为图像之间的切换增加淡入淡出效果

// Initialize the blur
$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});

//Switch the image
$('#some-element').backgroundBlur('http://URL-of-another-image');