background-blur, 用于jQuery的超轻量 跨浏览器 图像模糊插件

分享于 

4分钟阅读

GitHub

  繁體 雙語
Ultra light cross browser image blurring plugin for jQuery
  • 源代码名称:background-blur
  • 源代码网址:http://www.github.com/msurguy/background-blur
  • background-blur源代码文档
  • background-blur源代码下载
  • Git URL:
    git://www.github.com/msurguy/background-blur.git
    Git Clone代码到本地:
    git clone http://www.github.com/msurguy/background-blur
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/msurguy/background-blur
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    background-模糊插件

    背景模糊插件是一个用于模糊图像的跨浏览器 插件插件。

    有关文档和演示,请参阅 http://msurguy.github.io/background-blur/插件

    安装和使用

    使用 Bower 安装插件:

    bower install background-blur

    或者使用 NPM:

    npm install background-blur

    或者手动:

    <script src="jquery.min.js"></script><script src="background-blur.min.js"></script>

    创建一个包含模糊图像的容器:

    <divid='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});

    或者创建模糊图像,将它的淡入,然后将 switch 转换为另一个图像:

    // Initialize the 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});//Switch the image$('#some-element').backgroundBlur('http://URL-of-another-image');

    浏览器支持:

    • Chrome
    • Firefox
    • Safari和Safari移动( iOS )
    • 在浏览器中,如果没有动画,那么这个插件就会被修复。
    • IE9,IE10,IE11
    • Android浏览器

    有可能,更多。请让我知道一些浏览器不工作

    在引擎盖下面:

    这个插件使用SVG筛选器来模糊图像,如果在浏览器( 除了 IE ) 支持,则插件创建一个特殊的IE筛选器。

    ,为什么不简单使用 CSS 3模糊滤镜? : 对于老浏览器,浏览器对SVG模糊滤镜的支持要大得多。

    Velocity.js 支持:

    如果使用 Velocity.js 动画库,插件将自动检测它的存在,使动画更加淡入/淡入动画,尤它的是移动。 如果页面上没有速度,则使用"jquery的动画"。

    在哪里使用?

    这个插件目前在 http://www.nbcnews.com/video 服务器上使用。

    有问题/建议或者使用插件? 请在 http://twitter.com/msurguy 上访问Github或者 Twitter。

    许可证

    这里插件是在MIT许可下发布的,允许你使用商业和非商业项目。


    plugin  图像  bro  Light  浏览  BLUR