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

当前位置:主页 > jQuery库 > 布局和界面 > jQuery基于图片的元素背景模糊特效插件
jQuery基于图片的元素背景模糊特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-03
    阅读:
简要教程

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