跨浏览器彩色图片转黑白图片jquery插件
源码介绍
jquery.gray.js是一款跨浏览器彩色图片转黑白图片jquery插件。该插件使用多种技术手段来将彩色图片转换为黑白图片效果,支持的浏览器包括IE6,同时页支持各种移动手机设备。 可以通过npm或bower来安装jquery.gray.js插件。 在页面中引入gray.css样式文件,jquery和jquery.gray.min.js文件。 jquery.gray.js插件会自动初始化所有带 插件也支持 如果你想制作从彩色到黑白色的过渡动画,可以添加 jquery.gray.js插件也可以手动进行初始化。 另外可以通过切换 jquery.gray.js插件兼容的浏览器如下: jquery.gray.js彩色图片转黑白图片插件的github地址为:https://github.com/karlhorky/gray简要教程
安装
npm install --save jquery-gray
bower install --save gray
使用方法
<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结构
.grayscale
class的图片,将它们转换为黑白色。
<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-fade
class类。
<img src="/img/color.jpg" class="grayscale grayscale-fade">
手动初始化插件
$('.my-grayscale-class').gray();
grayscale-off
class类来切换彩色图片和黑白色图片。
$('.grayscale').toggleClass('grayscale-off');
浏览器兼容
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 跨浏览器彩色图片转黑白图片jquery插件
发表评论 取消回复