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:浏览器不支持该插件时的回调函数。