jQuery图片黑白开关插件BlackAndWhite
2014-09-30 14:34
381 查看
演
示 下
载
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 | 图片变换速度,包括淡入和淡出两个速度 |
示 下
载
标签:jQuery插件
http://www.dowebok.com/8.html
相关文章推荐
- 动态将彩色图片动画过渡到黑白图片的BlackAndWhiteView
- jquery插件之图片show and hide(一)
- jquery插件之图片show and hide(一)
- 实用的JQuery插件和演示(jQuery Plugins and Demos)
- 基于jQuery图片平滑连续滚动插件
- Black and White in Photoshop CS3 and Photoshop Lightroom: Create stunning monochromatic images in Ph
- jCarousel(jquery图片左右滚动插件)
- JQuery Cycle Plugin (jQuery循环插件_图片轮换)
- [原创]图片区域截取缩放插件 jQuery imgCut
- jQuery插件:图片放大镜--jQuery Zoom
- jQuery Lightbox 图片展示插件使用说明
- JQuery Jcrop 实现图片裁剪的插件
- LinScroll (jquery插件) (用图片自定义滚动条)
- 几个jQuery的图片裁剪插件
- Jquery 图片预览插件 imgPreview
- 基于jQuery图片平滑连续滚动插件
- 利用JQuery及其插件做出一个上传图片及利用prototype插件显示剪裁图片的例题
- [发布]LinScroll (jquery插件) (用图片自定义滚动条)
- jquery插件--图片拖拽排序【新增预览图和下载包】
- JQuery Jcrop 实现图片裁剪的插件