BlackAndWhite 把图片转成黑白效果 jQuery 插件 - 资源分享

BlackAndWhite 把图片转成黑白效果 jQuery 插件

发布于 2019-12-01 字数 5019 浏览 1265 评论 0

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

BlackAndWhite 把图片转成黑白效果 jQuery 插件

使用方法

引入文件

你需要同时引入jQuery文件和BlackAndWhite插件文件,jQuery文件必须放置到前面。

<script src="js/jquery.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="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Desert.jpg" alt="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Koala.jpg" alt="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Lighthouse.jpg" alt="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Penguins.jpg" alt="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="images/Tulips.jpg" alt="BlackAndWhite 把图片转成黑白效果 jQuery 插件">
        </a>
    </li>
</ul>

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

CSS样式

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

初始化插件

$('.bwWrapper').BlackAndWhite({
    hoverEffect : true, // default true
    // set the path to BnWWorker.js for a superfast implementation
    webworkerPath : false,
    // to invert the hover effect
    invertHoverEffect: false,
    // this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
    intensity:1,
    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
        fadeIn: 200, // 200ms for fadeIn animations
        fadeOut: 800 // 800ms for fadeOut animations
    },
    onImageReady:function(img) {
        // this callback gets executed anytime an image is converted
    }
});

BlackAndWhite 把图片转成黑白效果 jQuery 插件

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

可选参数

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

轻量级的解决方案

如果你正在寻找一个轻量级的解决方案,您可以使用以下 CSS 代替,但它不是 100% 跨浏览器:

img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    transition: 0.3s ease-in;
}

img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

相关链接

Github 地址:https://github.com/GianlucaGuarini/jQuery.BlackAndWhite

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0