[代码样式]jQuery图片黑白开关插件BlackAndWhite

[代码样式]jQuery图片黑白开关插件BlackAndWhite

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

使用方法

引入文件

<script src="https://www.dowebok.com/js/jquery-1.9.0.min.js"></script>
<script src="https://www.dowebok.com/js/jQuery.BlackAndWhite.js"></script>

HTML

<ul id="wrapper">
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/images/Chrysanthemum.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/images/Desert.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/images/Koala.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/images/Lighthouse.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/images/Penguins.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="bwWrapper" href="###">
            <img  src="https://www.dowebok.com/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 图片变换速度,包括淡入和淡出两个速度
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]jQuery跟随滚动插件Scroll Follow

2020-11-20 15:02:27

脚本代码

[代码样式]jQuery内容展开折叠插件Collapse

2020-11-20 15:02:29

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索