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.初始化插件

示例代码

  1.     //初始化插件
  2.     var scratch = new Scratch({
  3.         canvasId : 'js-scratch-canvas', //画布ID
  4.         imageBackground : imageBackgroundURL, //刮开的图片URl
  5.         pictureOver : './images/foreground.jpg', //前景图片URL
  6.         cursor : {
  7.             png : './images/scratch.png', //手势图片URL
  8.             cur : './images/scratch.cur', //手势图标URL
  9.             x : '20',
  10.             y : '17'
  11.         },
  12.         radius : 15, //刮的大小
  13.         nPoints : 150, //刮的密度
  14.         percent : 30, //刮开的区域百分比,用于回调函数
  15.         callback : function() {
  16.             if (imageBackgroundURL == imagearr[0]) {
  17.                 alert("恭喜你中了一等奖!");
  18.             } else if (imageBackgroundURL == imagearr[1]) {
  19.                 alert("恭喜你中了二等奖!");
  20.             } else if (imageBackgroundURL == imagearr[2]) {
  21.                 alert("恭喜你中了三等奖!");
  22.             } else {
  23.                 alert("未中奖,下次继续努力!");
  24.             }
  25.         },
  26.         pointSize : {
  27.             x : 3,
  28.             y : 3
  29.         }
  30.     });

特别说明

,示例只提供了部分代码,详细用法见index.html