dowebok

jQuery图片黑白开关插件BlackAndWhite

分类:代码 日期: 点击(8,714) 下载(0) 来源:未知 收藏

jQuery图片黑白开关插件BlackAndWhite

演 示 下 载

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 是应用于图片上,所以必须等图片加载完成。

参数

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

演 示 下 载

演 示 下 载

关注dowebok公众号

标签:

相关文章

下载:jQuery图片黑白开关插件BlackAndWhite
jQuery图片黑白开关插件BlackAndWhite
城通网盘 百度网盘 本地下载

百度网盘密码: