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');
二、效果