首页 > Web开发 > 详细

Js 之background-blur背景模糊插件

时间:2020-05-18 09:45:46      阅读:195      评论:0      收藏:0      [点我收藏+]

一、使用

文档: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‘);

 

二、效果

技术分享图片

 

Js 之background-blur背景模糊插件

原文:https://www.cnblogs.com/yang-2018/p/12908710.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!