JS实现的刮刮卡程序

阅读更多

来源：

基于HTML5 Canvas的刮奖（刮刮卡）小控件

基于HTML5 Canvas的刮奖（刮刮卡）小控件(Scratch card based on HTML5 Canvas)

JavaScript刮奖效果(jquery图片刮奖插件)（附件gj2）

jQuery UI模拟刮彩票涂层显示结果

 

非控件实现：

使用HTML5实现刮刮卡效果

jQuery+HTML5实现刮刮乐抽奖特效

可配置项与回调函数

 

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

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();
});

 

    
    
    
    
    
    



    

        
￥5000000元
	
    

 

。。。

• 刮奖JS.zip (3 KB)
• 描述: 文中JS
• 下载次数: 1

• Gua.rar (271.7 KB)
• 描述: 这个其实也是JS
• 下载次数: 2

• gj2.zip (426.2 KB)
• 下载次数: 1

• lucky-card-master.zip (69.3 KB)
• 下载次数: 3