微信公众平台开发微信公众平台开发模式企业微信公众平台刮刮乐

来源：互联网发布：将java对象转换成json 编辑：程序博客网时间：2024/05/16 00:52

为了自我学习和交流PHP（jquery,linux,lamp,shell,javascript,服务器）等一系列的知识，希望光临本博客的人可以进来交流。寻求共同发展。搭建平台。本人博客也有许多的技术文档，希望可以为你提供一些帮助。

QQ群： 191848169 点击链接加入群【PHP技术交流（总群）】

关于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>

与其他图片等结合后，在微信浏览器中显示如下所示：

1 0

微信公众平台开发 微信公众平台开发模式 企业微信公众平台 刮刮乐