同学帮帮 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的更多相关文章

  1. 同学帮帮移动 H5 弹出层类组件:txbb-pop

    Txbb.Pop 同学帮帮弹出层类组件,简洁.无依赖,使用 CSS3 实现动画效果. 为什么要再造一遍轮子 弹出层是常见的业务场景,而且弹出层的业务场景很简单,没必要使用大而全的库,并且,我们经常会有 ...

  2. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

  3. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  4. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  5. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  6. 游戏的套路你知道吗? H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  7. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  8. php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法

    php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为: ...

  9. 用c#开发微信 (16) 微活动 2 刮刮卡

    微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...

随机推荐

  1. MySQL建表设置外键提示错误

    错误内容: ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to ...

  2. (转)Akka学习笔记

    Akka学习笔记系列文章: <Akka学习笔记:ACTORS介绍> <Akka学习笔记:Actor消息传递(1)> <Akka学习笔记:Actor消息传递(2)> ...

  3. Java调用本地接口:java.lang.UnsatisfiedLinkError

    Java调用本地接口:java.lang.UnsatisfiedLinkError 我的问题不在这篇文章描述中, 而是因为jni原来是c实现, 现在切换到cpp了, 需要在对应的cpp文件中加入ext ...

  4. JMeter 三:搭建一个Web Test Plan

    参考:http://jmeter.apache.org/usermanual/build-web-test-plan.html 场景 5个用户并发测试百度搜索,有两个请求,一个请求搜索“你好”,一个请 ...

  5. 苹果推送服务器端证书配置.pem生成

    做苹果推送服务器,很重要的一步,就是生成与苹果APNS连接的证书,一般是.pem文件: 首先在苹果开发者中心 生成 aps_devlopment.cer文件:然后下载:双击导入钥匙串: 打开钥匙串 - ...

  6. iOS 证书管理.p12文件不能导出

    iOS证书不能导出p12文件: 首先要确认证书是从你这个电脑上制作生成的! 钥匙串-->我的证书--->右键,就可以导出了!

  7. Python爬虫碎碎念

    最近领导给了一个任务,从单位的数据库里面导出所有的数据,存到本地excel表格.我就想,这不挺简单的么,给我数据库的密码账户,几条语句搞定. 结果让人大失所望,单位数据库只能通过后台管理系统查看,平台 ...

  8. Drupal所能够理解的资源

    Drupal能够识别哪些资源类型? profile,不知道怎么翻译,应该是指安装类型,固定地存放于profiles目录下. module,模块,可以存在于多个目录下:modules.profiles/ ...

  9. 用squid配置代理服务器(基于Ubuntu Server 12.04)

    怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ 1. 安装squid $sudo apt-get install squid -y 注: ...

  10. Android Studio Note

    1.中文乱码 很多同学都安装了Android Studio,但是发现中文是乱码,其实这个很好解决的.在IDE里点击File,选择Settings...快捷键是Ctrl+alt+s 在打开的窗口中,找到 ...