Js 之background-blur背景模糊插件

一、使用

文档：https://msurguy.github.io/background-blur/

<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>

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

$(\'#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
});

创建模糊图像并为图像之间的切换增加淡入淡出效果

$(\'#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\');

 

二、效果