BlackAndWhite - jQuery图片黑白开关插件

BlackAndWhite 是一款图片类的插件，这款插件可以很容易地将任何彩色图片转换成B＆W灰度图片，当鼠标移动到图片上时，图片可慢慢恢复原有的色彩。该插件可用于图片展示或相册等。

演 示 下 载

BlackAndWhite 是通过创建一个 canvas（若浏览器支持，如Firefox、Chrome等）或 SVG（如浏览器不支持 canvas，如IE6 - IE8）的灰色图像“覆盖”在原来的彩色图片上，以达到图片“变灰”的效果。

使用方法

引入文件

<script src="js/jquery-1.9.0.min.js"></script>

<script src="js/jQuery.BlackAndWhite.js"></script>

HTML

<ul id="wrapper">

    <li>

        <a href="###" class="bwWrapper">

            <img  src="images/Chrysanthemum.jpg" alt="">

        </a>

    </li>

    <li>

        <a href="###" class="bwWrapper">

            <img  src="images/Desert.jpg" alt="">

        </a>

    </li>

    <li class="last">

        <a href="###" class="bwWrapper">

            <img  src="images/Koala.jpg" alt="">

        </a>

    </li>

    <li>

        <a href="###" class="bwWrapper">

            <img  src="images/Lighthouse.jpg" alt="">

        </a>

    </li>

    <li>

        <a href="###" class="bwWrapper">

            <img  src="images/Penguins.jpg" alt="">

        </a>

    </li>

    <li class="last">

        <a href="###" class="bwWrapper">

            <img  src="images/Tulips.jpg" alt="">

        </a>

    </li>

</ul>

注意，有一个类名 class="bwWrapper"，这个必须有，因为下面的 CSS 需要用到。当然改成别的也可以，但必须与 CSS 样式对应。

CSS

.bwWrapper {

    position: relative;

    display: block;

}

调用方法

$(window).load(function(){

    $('.bwWrapper').BlackAndWhite({

        hoverEffect:true,

        webworkerPath: 'js/'

    });

});

注意：BlackAndWhite 必须使用 window load 事件，而不是 $(document).ready() 事件，因为 BlackAndWhite 是应用于图片上，所以必须等图片加载完成。

API	说明
hoverEffect	hover 效果，默认为 false，即鼠标移动到图片上不会变为彩色的，仍然为灰色的；如果为 true，则反之
webworkerPath	文件路径，BlackAndWhite 需要用到一个 BnWWorker.js 文件，这个文件才是真正处理图片的脚本，这个参数就是指定 BnWWorker.js 文件的路径。默认为 false，即与 BlackAndWhite 在文件夹下
responsive	响应
invertHoverEffect	颠倒 hover 效果，即 hoverEffect 的效果相反
speed	图片变换速度，包括淡入和淡出两个速度

演 示 下 载

下载地址

·进入下载地址列表