同学帮帮 h5 刮刮卡组件:Txbb.Scratch
同学帮帮 h5 刮刮卡组件,简洁、无依赖,支持 globals 和 amd 两种调用方式。
暂时只能用在移动端

使用方法
<div id="J-Scratch"></div>
var scratchInstance = Txbb.Scratch.attach(element, options);
element
需要初始化的 容器 元素,canvas 元素会被添加进去。
var scratchInstance = Txbb.Scratch.attach(document.querySelector('#J-Scratch'), options);
options
- bg(type: String): canvas 所在容器的背景颜色
- fg(type: String): canvas 元素的颜色,即刮刮卡的颜色
- middle(type: String): 刮完奖之后显示的元素,可以是 html 也可以是纯字符串
- size(type: Number): 默认 20, 刮一下的半径
- onEnd(type: Function): 刮完奖的回调函数
实例方法
- reset:scratchInstance.reset(options)重置刮刮卡,重置方法传入options可以改变实例化时的options
项目主页:http://www.open-open.com/lib/view/home/1442817103123
同学帮帮 h5 刮刮卡组件:Txbb.Scratch的更多相关文章
- 同学帮帮移动 H5 弹出层类组件:txbb-pop
Txbb.Pop 同学帮帮弹出层类组件,简洁.无依赖,使用 CSS3 实现动画效果. 为什么要再造一遍轮子 弹出层是常见的业务场景,而且弹出层的业务场景很简单,没必要使用大而全的库,并且,我们经常会有 ...
- 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
- Html5实现移动端、PC端 刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
- 用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
- 游戏的套路你知道吗? H5 Canvas刮刮乐
玩游戏的人 很多时候都会遇到翻牌子 开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结 指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了 其实很多时候在你点开那个 ...
- qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
- php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法
php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为: ...
- 用c#开发微信 (16) 微活动 2 刮刮卡
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...
随机推荐
- mysql多实例介绍及配置
mysql多实例介绍及配置 1.mysql多实例介绍 1.1 什么是mysql多实例 mysql多实例就是在一台机器上开启多个不同的服务端口(如:3306,3307),运行多个MySQL服务进程,通过 ...
- js 倒计时跳转页面
<script type="text/javascript">var i = 5; var intervalid; intervalid = setInterval(& ...
- X 开启新的 X window 服务器
X -ac -terminate :3 开启服务,禁用访问控制约束,重置时关闭服务,$DISPLAY=:3 此时设置用户程序的 DISPLAY 值,就可在指定的 X 服务器上打开程序,比如 DISPL ...
- Rails 枚举
Rails Model中使用枚举有两种方案,一种是rails内置的enum,一种使用enumerize这个gem,不管哪种都能达到相同的目的. 首先介绍第一种: 一. enum 基本使用方法,以一个案 ...
- Annotation:系统内建Annotation
1,掌握系统内建的三个Annotation. Annotation被称为元数据特效,也被称为注释,即:使用注释方式,加入一些程序信息. Java.lang.annotation接口是所有Annotai ...
- 【转贴】J2EE中的13种技术规范
J2EE平台由一整套服务(Services).应用程序接口(APIs)和协议构成,它对开发基于Web的多层应用提供了功能支持,下面对J2EE中的13种技术规范进行简单的描述(限于篇幅,这里只能进行简单 ...
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- 点击button触发onclick事件判空后依旧自动跳转
这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...
- Js日常笔记之变量删除
在Javascript是可以使用delete来手动删除变量,通过这样的方法让GC来回收内存,但在JS中并不是所有的对象都可以被删除的 JS中通过 var\function 声明因含有DontDelet ...
- 接收广播BroadcastReceiver
Broadcast Receiver用于接收并处理广播通知(broadcast announcements).多数的广播是系统发起的,如地域变换.电量不足.来电来信等.程序也可以播放一个广播.程序可以 ...