当前位置:jQuery学习 > jQuery > jQuery 图片黑白插件

jQuery 图片黑白插件

时间:2012-04-19QQ群:116983258

在使用 jQuery 时有可能遇到这样的需求,需要将图片转变为黑白图片,比如当用户离线的时候图片变为灰色。今天和大家分享这样一个插件,使得图片变成灰色。

首先,引入 jQuery 文件和 BlackAndWhite 插件文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/js/jQuery.BlackAndWhite.js" type="text/javascript"></script>

使用 div 将图片包裹起来,并指定 class:

<div class="bwWrapper" >
    <img width="300" height="225" src="Koala.jpg" / >
</div>

设置包含 div 的样式:

.bwWrapper {
    position:relative;
    display:block;
}

在 document ready 事件中调用:

$(document).ready(function () {
    $('.bwWrapper').BlackAndWhite({
        hoverEffect: true, // 默认为 true
        webworkerPath: false
    });
});

当然,如果你需要保证图片加载完后来执行这个效果的话,请将调用代码放在window load事件中:

$(window).load(function(){
   //调用插件方法
});

具体的效果,大家可以上 BlackAndWhite 的官网看看或者从github上下载,考虑国内不少朋友都访问不了国外网站,将它放到百度网盘上,有兴趣的可以下载看看,演示挺漂亮的!下载jQuery 图片黑白插件

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-plugin-image-black-white.html

所有话题