本文主要详细介绍jQuery橡皮擦插件的使用方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

eraser插件简介：

1.jQuery.eraser是基于jQuery的插件。其效果类似橡皮擦。按住鼠标在图片上来回移动，上面的灰色图片就会被抹掉，显示下面的彩色图片。

2.2.jQuery.eraser的原理是有两个灰度和彩色图像(都需要提前准备)。将灰度图像加载到画布中，然后用CSS将其定位在与彩色图像相同的位置，设置z-index使画布位于彩色图像之上。当您按住鼠标并在画布上来回移动时，会出现类似橡皮擦的效果。

橡皮擦的用法：

1.文件介绍

脚本src=js/jquery.min.js/script

script src= js/jquery . eraser . js /script

2.超文本标记语言

div id=box

img id= real src= img/real . jpg alt= bottom

img id= cover src= img/cover . jpg alt= top

/div

3.半铸钢钢性铸铁(Cast Semi-Steel)

*{

边距：0px

填充：0px

}

#框{

宽度：400px

位置：相对；

左边距：50%；

左：-200 px；

}

#框图像{

宽度：100%；

高度：自动；

位置：绝对；

浮动：左；

z指数：1；

}

#封面{

宽度：100%；

高度：自动；

位置：绝对；

浮动：左；

z指数：999；

}

4.Java Script语言

$(function(){

$(#cover )。橡皮擦()；

});

5.更多配置选项

//设置要擦除的画笔的大小

$(#cover )。橡皮擦({ size:80 })；

//单击“重置”按钮重置画布。

$(#reset )。单击(函数(){

$(#cover )。橡皮擦(重置)；

});

//单击“清除”按钮擦除整个画布。

$(#remove )。单击(函数(){

$(#cover )。橡皮擦(清除)；

});

//擦除率达到50%时调用函数

$(#cover )。橡皮擦({

完成比率：0.1，

complete function:function(){

Alert(擦除已达到50% )；

}

});

6.预防措施

需要注意的是，如果要设置画笔的大小，擦除一定比例后调用一个函数，初始化画布时一起设置。例如：

$(#cover )。橡皮擦({

尺码：80，

完成比率：0.5，

completeFunction:function(){

警报(666)；

}

});

否则，设置笔刷大小和稍后调用函数都没有用。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。