ScratchAward
功能描述
本模块是移动端刮刮卡控件,实现刮卡中奖功能,可设置中奖几率,自定义中奖显示。
快速使用
1.引入CSS文件
<link rel="stylesheet" type="text/css" href="css/style.css">
2.引入JS文件
<script type="text/javascript" src="script/scratchaward.js"></script>
3.初始化插件
示例代码
//初始化插件
var scratch = new Scratch({
canvasId : 'js-scratch-canvas', //画布ID
imageBackground : imageBackgroundURL, //刮开的图片URl
pictureOver : './images/foreground.jpg', //前景图片URL
cursor : {
png : './images/scratch.png', //手势图片URL
cur : './images/scratch.cur', //手势图标URL
x : '20',
y : '17'
},
radius : 15, //刮的大小
nPoints : 150, //刮的密度
percent : 30, //刮开的区域百分比,用于回调函数
callback : function() {
if (imageBackgroundURL == imagearr[0]) {
alert("恭喜你中了一等奖!");
} else if (imageBackgroundURL == imagearr[1]) {
alert("恭喜你中了二等奖!");
} else if (imageBackgroundURL == imagearr[2]) {
alert("恭喜你中了三等奖!");
} else {
alert("未中奖,下次继续努力!");
}
},
pointSize : {
x : 3,
y : 3
}
});
特别说明
,示例只提供了部分代码,详细用法见index.html