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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24