插件 jQuery.gray 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.gray 中文API文档 https://github.com/karlhorky/gray

CSS Styles and jQuery plugin to display images in grayscale.

Demo

Support:

  • IE 6-11 (10 and 11 use the JavaScript polyfill)
  • Edge 12+ (12 uses the JavaScript polyfill)
  • Firefox 10+, Firefox on Android
  • Chrome 19+, Chrome for Android 25+
  • Android Browser 4.4+
  • Safari 6+, Safari iOS 6+
  • Opera 15+, Opera Mobile 16+
  • BlackBerry Browser 10+

Installation

You can install with npm:

npm install --save jquery-gray

Or Bower:

bower install --save gray

Or use the CDN links:

https://npmcdn.com/jquery-gray@1.6.0/css/gray.min.css
https://npmcdn.com/jquery-gray@1.6.0/js/jquery.gray.min.js

Or you can just download it.

How to Use

  1. Add the CSS from gray.css.

    If you want to use your own CSS selector instead of .grayscale, edit or copy the CSS.

  2. Add the plugin after jQuery at the bottom of the body.

    <script src="/js/jquery.gray.min.js"></script>
    

    The plugin automatically initializes for all elements with a class of grayscale.

    The plugin can also be called manually with:

    $('.my-grayscale-class').gray();
    

    The effect can be toggled with the grayscale-off class:

    $('.grayscale').toggleClass('grayscale-off');
    
  3. Add your image with a class of grayscale.

    <img src="/img/color.jpg" class="grayscale">
    

    Images with CSS background-image, background-size and (numeric) background-position are also supported:

    <div style="
      background-image   : url(/img/color-sprite-lg.jpg);
      background-size    : auto 72px;
      background-position: -180px 0;
      display            : inline-block;
      width              : 180px;
      height             : 72px;
    " class="grayscale"></div>
    

    Non-numeric background-size (cover, contain, …) and background-position (center, …) are not currently supported (pull requests welcome!).

  4. (Optional) Add class of grayscale-fade if you want transitioning from grayscale back to color on hover

    <img src="/img/color.jpg" class="grayscale grayscale-fade">
    
  5. If you are using Modernizr already, make sure that the required feature detects are included in your build.

  6. Revel in your absolute and utter awesomeness.

Caveats

Non-numeric background-size and background-position

Non-numeric background-size (cover, contain, …) and background-position (center, …) are not currently supported.

Percentage-based background-position

Percentage-based background-position (ex. 50% 50%, …) is not currently supported.

Non-visible elements will not be correctly initialized

Calling the plugin on hidden images (or other images that cannot have their size calculated) will fail in polyfill browsers. Workarounds can be found in the discussions at #57 and #40.

Child elements removed in browsers without support for CSS filters

Target elements with child elements will have those child elements removed in browsers without support for CSS filters. #61

Event listeners removed in browsers without support for CSS filters

Target elements with event listeners removed in browsers without support for CSS filters. #65

Colored borders

Colored borders will be also converted to grayscale in non-polyfill browsers. To also convert to grayscale in polyfill browsers, the class grayscale-replaced can be used:

.grayscale-replaced {
  border-color: #494949 !important;
}

How it Works

In browsers that support css filters, the styles in gray.css will use CSS filters to turn the image gray.

Modernizr

The jquery.gray plugin uses the Modernizr._prefixes, css-filters, Inline SVG and svg-filters feature detects from Modernizr to determine browser support. If a browser supports inline SVG and SVG filters but not CSS filters, the plugin replaces the elements with SVG elements with filters.


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>