跨浏览器彩色图片转黑白图片jquery插件

当前位置:主页 > jQuery库 > 图片效果 > 跨浏览器彩色图片转黑白图片jquery插件
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
跨浏览器彩色图片转黑白图片jquery插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-06-13
    阅读:
简要教程

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

网友评论