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文件。

HTML结构

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

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

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

手动初始化插件

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