jQuery基于图片的元素背景模糊特效插件
Blurr是一款基于图片的元素模糊背景特效jQuery插件。该插件根据图片的主要色彩,将元素的背景制作为这些色彩合成的模糊效果。色彩融合自然,有磨砂的效果,非常时尚好看。查看演示 下载插件
浏览器支持
使用该背景模糊插件先要引入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) });});
配置参数
浏览器支持
- 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基于图片的元素背景模糊特效插件】相关文章
3. 基于Threejs的jQuery 3d图片旋转木马特效插件
6. jQuery图片模糊插件crossfade.js_dowebok
7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
8. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
本文来源:https://www.51html5.com/a1518.html
﹝jQuery基于图片的元素背景模糊特效插件﹞相关内容
- 10款web前端优秀的jQuery特效插件
- jQuery炫酷图片3d背景视觉差特效
- jquery 新建的元素事件绑定问题
- jquery 新建的元素事件绑定问题
- 推荐15款创建漂亮幻灯片的 jQuery 插件
- HTML5技术实现剪切+上传图片的功能
- CSS3边框背景-边框背景(-border-image)
- 细谈HTML 5新增的元素
- 帮助你实现超炫的元素运动效果
- 在页面滚动时展现动感的元素动画效果