JS实现的刮刮卡程序

来源：

非控件实现：

可配置项与回调函数

初始化lucky-card控件时，支持传入一个JSON对象和(或)一个回调函数，用于配置控件功能/设置回调函数

扫描二维码关注公众号，回复： 326993 查看本文章

LuckyCard.case(settings,callback);

参数settings是一个JSON对象，可选，用于配置控件功能
参数callback是回调函数，可选，也可以写在settings中

可配置项（settings）一览

key 类型默认值描述

coverColor	string	"#C5C5C5"	刮开层的颜色，未设置coverImg时生效，支持十六进制和rgba写法
coverImg	string	""	刮开层可以是一张图片，在这里设置图片地址，一旦设置此项，coverColor将失效。（注意：图片地址不支持跨域，如果跨域可以考虑将先其转成Data URI）
ratio	number	0.8	触发回调函数时刮开面积占总面积的比例，超过这个比例回调就触发。建议取值在0到1之间。
callback	function	null	回调函数，在刮开面积占总面积的比例超过设定值时触发，亦可作为一个独立的参数存在。回调函数内可以调用this.clearCover()方法清除掉刮开层的所有像素。

//基本用法
LuckyCard.case({coverColor:'#CCCCCC',ratio:.6,callback:function(){alert('中奖啦！')}});

//刮开层支持使用图片，但图片不能跨域，如果跨域可以考虑将先其转成Data URI，再设置
LuckyCard.case({coverImg:'./demo.jpg'});

//callback可作为一个独立的参数存在
LuckyCard.case(function(){
    //清除掉刮开层的所有像素
    this.clearCover();
});

<!DOCTYPE html>
<!-- saved from url=(0046)http://franslee.github.io/lucky-card/demo.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>lucky-card.js</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: #FFFFFF;
    }
    
    #card {
        height: 100%;
        font-weight: bold;
        font-size: 36px;
        line-height: 100px;
        text-align: center;
        background: #FAFAFA;
    }
    
    #scratch {
        width: 300px;
        height: 100px;
        margin: 50px auto 0;
        border: 1px solid #ccc;
    }
    </style>
    <link rel="stylesheet" href="./css/lucky-card.css">
    <script src="./js/lucky-card.min.js"></script>
</head>

<body>
    <div id="scratch">
        <div id="card" style="background:yellow">￥5000000元</div>
	</div>
    <script>
    LuckyCard.case({
		coverColor:'red',
        ratio: .5
    }, function() {
        alert('至于你信不信，我反正不信！');
        this.clearCover();
    });
    </script>



</body></html>

。。。

JS实现的刮刮卡程序

可配置项与回调函数

可配置项（settings）一览

猜你喜欢