最近一直在做微信相关的开发工作，刮刮乐是一个最常见的微信应用了，网上也有很多的教程，本来是不想写这篇博文的，但又怕网友被坑，我还是写一下。

下载 jquery扩展wScratchPad.js, 原站的页面打不开，我这里提供一个下载地址 wScratchPad-2.1.0.zip

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

在这个扩展里面,怎么才能过去用户的刮开的面积，代码如下:

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

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

scratchMove（）

而是

scratchUp（）

为嘛？看源码，代码如下:

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

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

Tags: 微信刮刮乐开发

分享到：