一个jQuery支持的橡皮擦工具，使您能够使用鼠标移动或触摸手势来抓取图像，以显示下面隐藏的图像，就像抓取卡一样。

这通常用于推广要求用户在查看附加信息之前采取行动的产品或服务。

参见：

• jQuery插件用于HTML5基于画布的Scratchcard-ScratchIt
• 纯JavaScript触控刮刮卡
• 支持触摸的虚拟刮刮卡，带有JavaScript和CanvasâTouch2Revelal

如何使用它:

1.包括jQuery库和jquery.eraser.js查询页面上的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.eraser.js"></script>

2.将重叠的图像添加到页面中。

<img id="overlay" src="overlay.jpg" />
<img id="underneath" src="underneath.png" />

#overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
 
#underneath {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}

3.调用“underground”图像上的函数并完成。

$('#underneath').eraser({
  // ...
});

4.指定笔刷大小。默认值：40。

$('#underneath').eraser({
  size: 20,
});

5.当达到擦除比率时触发一个功能。

$('#underneath').eraser({
  completeRatio: .65,
  completeFunction: myFunction,
});

6.API方法。

// erases all canvas content
$('#underneath').eraser( 'clear' ); 
 
// revert back to original content
$('#underneath').eraser( 'reset' ); 
 
// change the brush size
$('#underneath').eraser( 'size', 80 ); 
 
// enable or disable erasing
$('#underneath').eraser( 'enable/disable' ); 
 
// returns true if the eraser is enabled
$('#underneath').eraser( 'enabled' );

预览截图

刮擦以揭示隐藏在下面 图像 jQuery橡皮擦