jQuery.eraser – jQuery橡皮擦插件
简介
jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片。
jQuery.eraser 的原理其实是有灰色、彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的效果。
浏览器兼容
IE9+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.eraser.js"></script>
2、HTML
<div class="dowebok"> <img src="images/1.jpg" alt=""> <img id="redux" src="images/2.jpg" alt=""> </div>
3、CSS
* { margin: 0; padding: 0; } .dowebok { position: relative; width: 700px; height: 438px; margin: 0 auto; } .dowebok img { position: absolute; left: 0; top: 0; z-index: 1; } #redux { position: absolute; left: 0; top: 0; z-index: 2; }
4、JavaScript
$(function(){ $('#redux').eraser(); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
size | 整数 | 40 | 橡皮擦大小 |
completeRatio | 浮点数 | 0.7 | 擦出比率 |
completeFunction | 函数 | null | 配合 completeRatio 使用,达到擦出比率后的函数 |
progressFunction | 函数 | null | 擦出后的回调函数,他接收一个参数,为擦出后的比率(0.0 – 1.0) |
reset | 重置,即还原成未擦出的状态,如:$(‘#yourImage’).eraser(‘reset’); | ||
clear | 清除,如:$(‘#yourImage’).eraser(‘clear’); |
标签:jQuery插件