代码介绍

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

演示截图

使用方法

引入文件

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

HTML

<ul id="wrapper">
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Chrysanthemum.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Desert.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Koala.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Lighthouse.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Penguins.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Tulips.jpg" alt="">
        </a>
    </li>
</ul>

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

CSS

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

JavaScript

$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
        hoverEffect:true,
        webworkerPath: 'js/'
    });
});

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

参数

相关推荐: CSS3：精美的3D卡通汽车图形特效

资源介绍 纯css3绘制卡通复古的汽车，3D汽车图形，精美的汽车ui特效。 演示截图 相关推荐: 响应式图片文字横幅布局代码代码介绍 jQuery css3制作遮罩的图片文字横幅布局，创意的大图和文字标题响应式布局代码。 演示截图 相关推荐: jQuery解决…