刮刮卡抽奖是前端活动页常见的功能:

   链接:图像擦除插件(下载及教程讲解)

     推荐理由:无缝刮痕,兼容性好,上手简单

    插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博客文件中的jquery.eraser.js

使用方法如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait">
<title>刮刮卡实现</title>
</head> <style> .outBox{
position: relative;
top:300px;
width: 300px;
height: 130px;
margin: auto;
z-index: 100;
background: #AB945E;
} #scratch{
position:relative;
width:100%;
height:100%;
} #card {
width: 300px;
height: 130px;
line-height:130px;
font-size: 28px;
letter-spacing: 1px;
color:#ff0000;
text-align: center;
} #guaguaImg{
position: absolute;
top:0;
left:0;
z-index: 10;
width:100%;
height:100%;
} </style> <body> <!--刮奖层-->
<div class="outBox">
<div id="scratch">
<!--必须指定一个id为card的div才能使刮刮卡效果生效-->
<div id="card">女朋友一位</div>
<img src="img/shadow.png" id="guaguaImg"/>
</div>
</div> <script src="jquery-2.1.0.js"></script>
<script src="jquery.eraser.js"></script> <script> //刮刮卡相关方法
function initCard( event ) {
$("#guaguaImg").eraser({
"size":20,
completeRatio: .5, //擦到百分之多少清屏
completeFunction: function(){
remove();
alert("恭喜您获得"+$("#card").html());
}
});
} function remove(event) {
$("#guaguaImg").eraser('clear');
} function reset(event) {
$("#guaguaImg").eraser('reset');
} function grow(event) {
$("#guaguaImg").eraser("size",200);
} //初始化刮刮卡
window.onload = function() {
initCard();
} </script> </body>
</html>

效果如图:

js实现刮刮卡抽奖的更多相关文章

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

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

  2. paip.刮刮卡砸金蛋抽奖概率算法跟核心流程.

    paip.刮刮卡砸金蛋抽奖概率算法跟核心流程. #---抽奖算法需要满足的需求如下: 1 #---抽奖核心流程 1 #---问题???更好的算法 2 #---实际使用的扩展抽奖算法(带奖品送完判断和每 ...

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

    <?php //中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法) /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300, ...

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

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

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

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

  6. Atitit .html5刮刮卡的gui实现总结

    Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....posti ...

  7. qt qml 刮刮卡效果

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

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

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

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

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

随机推荐

  1. Go 语言设计哲学之四:项目布局-你如何设计项目结构

    在多年的 Go 语言实践积累后逐渐形成了一种典型项目结构,如下图所示: 上面就是一个支持构建二进制可执行文件(在 src 下)的典型 Go 项目的结构. 1 src 目录: 存放项目要编译构建的可执行 ...

  2. HotSpot类模型之InstanceKlass

    上一篇 HotSpot源码分析之类模型 介绍了类模型的基础类Klass的重要属性及方法,这一篇介绍一下InstanceKlass及InstanceKlass的子类. 1.InstanceKlass类 ...

  3. [从源码学设计]蚂蚁金服SOFARegistry之程序基本架构

    [从源码学设计]蚂蚁金服SOFARegistry之程序基本架构 0x00 摘要 之前我们通过三篇文章初步分析了 MetaServer 的基本架构,MetaServer 这三篇文章为我们接下来的工作做了 ...

  4. CTF-WEB-XTCTF-Web_php_unserialize

    题目来源 XTCTF-Web_php_unserialize 题目考点:PHP代码审计.PHP正则.PHP序列化与反序列化 解题思路 题目源码 <?php class Demo { privat ...

  5. yum 方式安装mysql (完整记录)

    2016-04-07 学习笔记,源代码安装比较麻烦,还是要尝试一下yum安装和rpm方式安装 一.检查系统是否安装老版本,有的话干掉 #yum list installed | grep mysqlm ...

  6. 用CorelDRAW来制作产品结构图的方法

    一.产品结构图的重要性 随着我国经济不断的高速发展,大家的生活水平不断提高,我们将会在生活生产中越来越多的,遇到许多各种各样的生产产品和生活消费品.科技的飞速进步,更是使这些产品.消费品包含了很强的科 ...

  7. Guitar Pro指弹入门——特殊拍号

    在吉他演奏技术不断提高的同时,我们经常会遇到一些奇怪的曲谱.他们的拍号不是正常的4/4拍或者3/4拍,而是5/4或者5/8等等我们不太了解的拍号,致使我们在演奏和练习之中陷入纷乱的节奏. 那么本期文章 ...

  8. Linux高可用之Keepalived

    1: 安装keepalived yum install -y keepalived ipvsadm 安装keepalived和LVS管理软件ipvsadm 主机与备机都需要安装 ######修改配置文 ...

  9. 用微信表情翻译表白,程序员的小浪漫,赶紧Get起来!

  10. 获取Win和Linux系统启动时间,类似uptime功能,用于判断是否修改过系统时间

    目录 前言 测试代码 Win测试 Linux测试 总结 前言 有时候需要判断系统是否有修改过时间,最简单的方法就是获取当前时间A,然后sleep X秒,然后获取 时间B,如果 时间B - 时间A ≠ ...