微信公众平台开发 微信公众平台开发模式 企业微信公众平台 刮刮乐
作者：方倍工作室
地址：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/
相关插件
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.
});
示例
包含头文件:
<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>
与其他图片等结合后，在微信浏览器中显示如下所示：
更详细的介绍及完整代码，请参考 微信公众平台开发最佳实践 一书。
=============================================================
欢迎关注方倍工作室微信，了解我们及行业的最新动态
