来源:
基于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>
。。。
相关推荐
win7修复本地系统工具
《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt
《计算机专业英语》chapter12-Intelligent-Transportation.ppt
内容概要:本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写,结合KTP700组态和TIA V14及以上版本,实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构,强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段,如轴初始化、运动控制以及主程序的设计思路。此外,还展示了如何通过KTP700组态实现人机交互,并分享了一些实用的操作技巧和技术细节,如状态机设计、HMI交互、异常处理等。 适用人群:从事自动化控制系统开发的技术人员,尤其是对西门子PLC编程感兴趣的工程师。 使用场景及目标:适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者;旨在帮助读者掌握3轴伺服系统的具体实现方法,提高实际项目中的编程能力。 其他说明:文中提供的代码示例和设计理念不仅有助于理解和学习,还能直接应用于类似的实际工程项目中。
内容概要:本文详细探讨了五种非线性滤波器(卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF))在水下长基线定位(LBL)系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示,分析了它们在不同条件下的优缺点。例如,KF适用于线性系统但在非线性环境中失效;EKF通过雅可比矩阵线性化处理非线性问题,但在剧烈机动时表现不佳;UKF利用sigma点处理非线性,精度较高但计算量大;PF采用蒙特卡罗方法,鲁棒性强但计算耗时;VDKF能够动态调整状态维度,适合信标数量变化的场景。 适合人群:从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。 使用场景及目标:①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用;②评估不同滤波器在特定条件下的性能,以便为实际项目选择合适的滤波器;③掌握MATLAB实现非线性滤波器的方法和技术。 其他说明:文中提供了详细的MATLAB代码片段,帮助读者更好地理解和实现这些滤波器。此外,还讨论了数值稳定性问题和一些实用技巧,如Cholesky分解失败的处理方法。
VMware-workstation-full-14.1.3-9474260
DeepSeek系列-提示词工程和落地场景.pdf
javaSE阶段面试题
《综合布线施工技术》第5章-综合布线工程测试.ppt
安川机器人NX100使用说明书.pdf
内容概要:本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配,确保了系统的可靠性和可维护性;梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能;组态画面则提供了友好的人机交互界面,便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性,降低了维护成本。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是熟悉PLC编程和控制系统设计的专业人士。 使用场景及目标:适用于需要进行老旧设备升级改造的企业,旨在提高生产设备的自动化水平和可靠性,降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。 其他说明:文中还分享了一些实际调试中的经验和技巧,如急停逻辑的设计、信号抖动的处理方法等,有助于读者在类似项目中借鉴和应用。
chromedriver-linux64-136.0.7103.48.zip
IMG_20250421_180507.jpg
《网络营销策划实务》项目一-网络营销策划认知.ppt
Lianantech_Security-Vulnerabil_1744433229
MybatisCodeHelperNew2019.1-2023.1-3.4.1
【深度学习部署】基于Docker的BERT模型训练与API服务部署:实现代码复用与模型共享
摘 要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装火车票订票系统软件来发挥其高效地信息处理的作用,可以规范信息管理流程,让管理工作可以系统化和程序化,同时,火车票订票系统的有效运用可以帮助管理人员准确快速地处理信息。 火车票订票系统在对开发工具的选择上也很慎重,为了便于开发实现,选择的开发工具为Eclipse,选择的数据库工具为Mysql。以此搭建开发环境实现火车票订票系统的功能。其中管理员管理用户,新闻公告。 火车票订票系统是一款运用软件开发技术设计实现的应用系统,在信息处理上可以达到快速的目的,不管是针对数据添加,数据维护和统计,以及数据查询等处理要求,火车票订票系统都可以轻松应对。 关键词:火车票订票系统;SpringBoot框架,系统分析,数据库设计
【ABB机器人】-00标准保养简介.pdf
最新校园跑腿小程序源码 多校版本,多模块,适合跑腿,外卖,表白,二手,快递等校园服务 此版本为独立版本,不需要微擎 直接放入就可以 需要自己准备好后台的服务器,已认证的小程序,备案的域名!