微信公众平台开发(55)刮刮乐
微信公众平台开发 微信公众平台开发模式 企业微信公众平台 刮刮乐
作者:方倍工作室
地址: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>
与其他图片等结合后,在微信浏览器中显示如下所示:
更详细的介绍及完整代码,请参考 微信公众平台开发最佳实践 一书。
=============================================================
欢迎关注方倍工作室微信,了解我们及行业的最新动态
本文来自博客园,作者:方倍工作室,转载请注明原文链接:https://www.cnblogs.com/txw1958/p/weixin-55-ScratchTicket.html