关于wScratchPad
wScratchPad.js，A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.
wScratchPad是jQuery上的一个插件，它能模拟出刮的行为，使你能“擦去”一层覆盖物，这层覆盖物既可是一个图片，也可以是某种颜色涂层。
官方网址为 http://wscratchpad.websanova.com/
相关插件
wPaint - Simple paint drawing plugin.
wColorPicker - Color pallette seleciton plugin.
配置选项：
$('#elem').wScratchPad({
size : 5, // The size of the brush/scratch.
bg : '#cacaca', // Background (image path or hex color).
fg : '#6699ff', // Foreground (image path or hex color).
realtime : true, // Calculates percentage in realitime.
scratchDown : null, // Set scratchDown callback.
scratchUp : null, // Set scratchUp callback.
scratchMove : null, // Set scratcMove callback.
cursor : 'crosshair' // Set cursor.
});
示例
包含头文件:
Percent scratched
$("#elem").wScratchPad({
scratchDown: function(e, percent){ console.log(percent); },
scratchMove: function(e, percent){ console.log(percent); },
scratchUp: function(e, percent){ console.log(percent); }
});
Update on the Fly
var sp = $("#elem").wScratchPad();
sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');
// Or directly with element.
$("#elem").wScratchPad('image', './images/winner.png');
Methods
$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', );
演示
下面是演示， 你可以直接用鼠标来刮
下面是刮完70%时自动清除剩下的
100
完整代码如下所示：
刮刮乐