因为公司要做一个项目活动在微信中要有这一样款游戏活动了，但自己不会写于是网上找到了一个作者写的方案下面我整理了一下可以用同时也分享给大家。

本来是不想写这篇博文的，但又怕网友被坑，我还是写一下。

下载 jquery扩展wScratchPad.js, 原站的页面打不开，我这里提供一个下载地址 http://www.phprm.com

然后(冷静)，一些没节操的博主，直接转别人的文章，验证的过程都省了，应该坑了不是小白。我这里修正一下

在这个扩展里面,怎么才能过去用户的刮开的面积

$("#wScratchPad3").wScratchPad({
cursor:'',  //设置鼠标的样式
color:'gray' ,  //设置覆盖物的颜色，跟image2功能相斥
width:"300",
height:"100",
image: "" //顶部的图片
// 更多配置相关的选项请看源码
scratchUp : function (e, percent) {
    if (percent > 60) {
        alert("sss");
    }
}
});

从上面的代码，看的出来，这个跟网上所谓的教程不一样，这里获取刮开的范围用到函数不是

scratchMove()

而是

scratchUp()

为嘛？看源码

scratchFunc: function(e, $this, event)
{
    e.pageX = Math.floor(e.pageX - $this.canvas_offset.left);
    e.pageY = Math.floor(e.pageY - $this.canvas_offset.top);
    $this['scratch' + event](e, $this);
    if(this.settings.realtimePercent || event == "Up") {
        if($this.settings['scratch' + event]) $this.settings['scratch' + event].apply($this, [e, $this.scratchPercentage($this)]);
    }
}

这里这个获取函数绑定的UP 而不是move

注意这里的wScratchPad是1.4.4最新版。

本文地址：http://www.phprm.com/develop/59651.html

转载随意，但请附上文章地址:-)