jQuery基于图片的元素背景模糊特效插件

Blurr是一款基于图片的元素模糊背景特效jQuery插件。该插件根据图片的主要色彩，将元素的背景制作为这些色彩合成的模糊效果。色彩融合自然，有磨砂的效果，非常时尚好看。

查看演示  下载插件
浏览器支持

• IE 8/9 (partial)
• IE 9+ (full)
• Chrome (desktop/mobile)
• Firefox
• Opera
• Safari (desktop/mobile)
• Windows版本的Safari不支持该插件。iPad上未作测试。

使用方法
使用该背景模糊插件先要引入jQuery和jquery.blurr.js文件。
<script src="js/jquery.min.js"></script><script src="js/jquery.blurr.js"></script>   
HTML结构
该背景模糊特效插件的HTML结构是使用一个<div>作为背景模糊层，该<div>中设置data-href属性指向用于背景模糊的图片。然后在该<div>里面可以放置一些文本或其它元素。
<div class="blur-this" data-href="example-image.jpg"><div>Text content inside the blur</div></div>
初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该背景模糊插件。
$(document).ready(function() {    $('.blur-this').blurr({        height: 300, // Height, in pixels of this blurred div.        sharpness: 40, // Sharpness, as a number between 0-100. 100 is very sharp, 0 is extremely blurry        offsetX: 0, // The x (left - right) offset of the image        offsetY: 0, // The y (top - bottom) offset of the image        callback: null // Callback to be called after the blur has been rendered. Recieves the following arguments (href, offsetX, offsetY, sharpness)    });});   
配置参数

• 下面是该背景模糊插件的一些可用参数：
• height：模糊div的高度，单位像素。
• sharpness：模糊度，值在0-100之间。
• offsetX：水平方向上图片的偏移。
• offsetY：垂直方向上图片的偏移。
• divBG：容器的背景色。默认值#000。
• callback：在容器被模糊之后的回调函数。接收以下参数：href, offsetX, offsetY, sharpness。
• unsupportedCallback：浏览器不支持该插件时的回调函数。

【jQuery基于图片的元素背景模糊特效插件】相关文章

1. jQuery基于图片的元素背景模糊特效插件

2. jQuery超炫图片3D背景视觉差特效插件

3. 基于Threejs的jQuery 3d图片旋转木马特效插件

4. CSS3系列教程:背景图片(背景大小和多背景图)

5. 15个款优秀的 jQuery 图片特效插件

6. jQuery图片模糊插件crossfade.js_dowebok

7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

8. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

9. 20个jQuery和CSS 的文本特效插件

10. [JQuery]ScrollMe滚动特效插件

本文来源：https://www.51html5.com/a1518.html