jquery.gray.js是一款跨浏览器彩色图片转黑白图片jquery插件。该插件使用多种技术手段来将彩色图片转换为黑白图片效果，支持的浏览器包括IE6，同时页支持各种移动手机设备。

安装

可以通过npm或bower来安装jquery.gray.js插件。

npm install --save jquery-gray
bower install --save gray                     
                 

使用方法

在页面中引入gray.css样式文件，jquery和jquery.gray.min.js文件。

<link rel="stylesheet" href="css/gray.min.css">
<script src=""path/to/js/jquery.min.js"></script>
<script src=""path/to/js/jquery.gray.min.js"></script>
                

HTML结构

jquery.gray.js插件会自动初始化所有带.grayscaleclass的图片，将它们转换为黑白色。

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

插件也支持background-image、background-size、background-position（只支持数值类型的，不支持关键字）等CSS属性。

<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>
                

如果你想制作从彩色到黑白色的过渡动画，可以添加grayscale-fadeclass类。

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

手动初始化插件

jquery.gray.js插件也可以手动进行初始化。

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

另外可以通过切换grayscale-offclass类来切换彩色图片和黑白色图片。

$('.grayscale').toggleClass('grayscale-off');
                

浏览器兼容

jquery.gray.js插件兼容的浏览器如下：

• 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+

jquery.gray.js彩色图片转黑白图片插件的github地址为：https://github.com/karlhorky/gray

在线预览    源码下载