微信公众平台开发 微信公众平台开发模式 企业微信公众平台 刮刮乐
2016-11-11 15:06
901 查看
为了自我学习和交流PHP(jquery,linux,lamp,shell,javascript,服务器)等一系列的知识,希望光临本博客的人可以进来交流。寻求共同发展。搭建平台。本人博客也有许多的技术文档,希望可以为你提供一些帮助。
QQ群: 191848169
点击链接加入群【PHP技术交流(总群)】
wScratchPad是jQuery上的一个插件,它能模拟出刮的行为,使你能“擦去”一层覆盖物,这层覆盖物既可是一个图片,也可以是某种颜色涂层。
官方网址为 http://wscratchpad.websanova.com/
wColorPicker - Color pallette seleciton plugin.
Update on the Fly
完整代码如下所示:
与其他图片等结合后,在微信浏览器中显示如下所示:
![](http://images.cnitblog.com/i/340216/201405/030947545024965.png)
![](http://images.cnitblog.com/i/340216/201405/030948030644915.png)
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/
相关插件
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>
与其他图片等结合后,在微信浏览器中显示如下所示:
![](http://images.cnitblog.com/i/340216/201405/030947545024965.png)
![](http://images.cnitblog.com/i/340216/201405/030948030644915.png)
相关文章推荐
- 微信公众平台开发模式 微信 语音识别 公众平台 消息接口 语音识别
- 微信公众平台开发1--微信公众账号开发者模式
- 微信公众开放平台开发03---百度BAE上搭建属于自己的微信公众平台 -JAVA,微信公众开放平台部署到百度云中BASE2.0,进行调试,木有钱买云服务器的亲们试试
- 微信开发原理 公众平台开发模式的数据交互方式
- 微信公众开放平台开发02---微信公众平台PHP接口和java接口对比
- 【微信易信公众平台开发】开启开发者模式
- 微信公众开放平台开发01---微信公众平台介绍,以及开发准备
- 【微信公众平台开发】微信JS-SDK开发,信公众平台js-sdk
- 微信公众平台开发视频教程-01-注册公众平台账号和微信服务器通讯接口验证
- 微信开发之公众平台开发模式下的数据交互模式
- 微信企业公众号开发之回调模式
- 微信网页第三方登录原理 微信开放平台和公众平台的区别 1.公众平台面向的时普通的用户,比如自媒体和媒体,企业官方微信公众账号运营人员使用,当然你所在的团队或者公司有实力去开发一些内容,也可以调用公众
- 微信公众帐号开发教程第3篇-开发模式启用及接口配置 (3)
- 腾讯微信公众平台开发教程(一)
- 微信公众平台开发教程(一) 微信公众账号注册流程
- 企业微信公众平台订阅号运营11个秘决
- 微信公众帐号开发教程第3篇-开发模式启用及接口配置
- 微信公众帐号开发教程第3篇-开发模式启用及接口配置
- 微信公众账号开发模式纯JSP代码