微信公眾平台開發（55）刮刮樂

本文轉載自查看原文 2013-08-06 13:51 23916 微信開發

微信公眾平台開發微信公眾平台開發模式企業微信公眾平台刮刮樂
作者：方倍工作室
地址：http://www.cnblogs.com/txw1958/p/weixin-55-ScratchTicket.html

關於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/

配置選項：

$('#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.
});

示例

包含頭文件:

<script type="text/javascript" src="./wScratchPad.min.js"></script>

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', <boolean>);

演示

下面是演示， 你可以直接用鼠標來刮

下面是刮完70%時自動清除剩下的

100

完整代碼如下所示：

<!DOCTYPE html>
<html>
<head>
    
    <meta CHARSET="UTF-8">
    
    <title>刮刮樂</title>
    <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="./wScratchPad.js"></script>
</head>
    <div id="wScratchPad3" style="display:inline-block; position:relative; border:solid black 1px;"></div>
    
    <script type="text/javascript">
        $("#wScratchPad3").wScratchPad({
            cursor:'./cursors/mario.png',
            scratchMove: function(e, percent)
            {
                if(percent > 70)
                this.clear();
            },
        });
    </script>
</body>
</html>

與其他圖片等結合后，在微信瀏覽器中顯示如下所示：