来源:
基于HTML5 Canvas的刮奖(刮刮卡)小控件(Scratch card based on HTML5 Canvas)
JavaScript刮奖效果(jquery图片刮奖插件)(附件gj2)
非控件实现:
可配置项与回调函数
初始化lucky-card控件时,支持传入一个JSON对象和(或)一个回调函数,用于配置控件功能/设置回调函数
LuckyCard.case(settings,callback);
- 参数settings是一个JSON对象,可选,用于配置控件功能
- 参数callback是回调函数,可选,也可以写在settings中
可配置项(settings)一览
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>
。。。
相关推荐
javascript特效实现刮刮卡特效代码下载
使用 HTML5 + canvas 实现刮刮卡效果
利用js+canvas实现刮刮卡注:本例只实现了刮落效果,具体中奖设计请自行实现!
html5 canvas 实现刮刮卡效果,实现简单网络资源占用少
2种使用html5实现刮刮卡效果 html5 刮刮卡 canvas jquery css3 简单粗暴,流行的刮刮卡实现方式 代码清晰,方便解读
JS刮刮卡,网页刮刮卡游戏源代码 可以自定义遮盖层颜色和刮刀的图片样式,是一个比较好玩的网页小应用。
java实现刮刮卡大转盘中奖概率的简单实现
很好用的微信刮刮卡源码,是目前互联网上企业推广和宣传的程序。
js刮刮卡特效代码是一款适合商家网站抽奖宣传的刮刮卡网页特效代码下载。
js刮刮卡效果
非常不错的HTML5+JS实现刮刮乐刮刮卡抽奖特效代码,基于jQuery实现,支持响应式手机页面使用, 支持手机涂抹,如今在微营销中经常使用这种方式,用户体验非常的不错。
android刮刮卡效果实现Demo,包含圆形图片的实现
使用canvas利用覆盖合成实现刮刮卡效果
该程序是微信刮刮卡最新程序源码,包括php源程序以及具体刮刮卡算法和相应显示图片文件等等。
canvas实现的刮刮卡小练习
最近要做刮刮卡小游戏,在网上搜索了一吧,自己改进了一下别人的代码,刮刮效果还可以自己调节。
刮刮卡功能实现 taro写法