本文主要详细介绍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)；

}

});

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

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。