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

　　　链接：图像擦除插件（下载及教程讲解）

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

　　  插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的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. xenserver使用ceph的rbd的方法

    首先安装的xenserver6.5的环境,看到有地方有提到这个上面可以安装rbd的支持,网上有一种方式是libvirt+kvm方式,因为ceph对libviet是原生支持的,但是xenserver底层 ...

  2. 电子邮件怎么用EasyRecovery恢复，只需简单5步

    在日常工作中,我们常常会用电子邮件与上事.客户等协商工作事务.电子邮件快捷.方便,慢慢地成为我们工作中不可缺少的沟通工具之一. 然而使用的过程中,你会发现垃圾邮件也越积越多了,平时,我看到积压的垃圾邮 ...

  3. Stream初步认识（一）

    Stream初步认识(一)测试 简介 Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对 集合进行的操作,可以执行非常复杂的查找.过滤和映射数据等操作. 使用Stream AP ...

  4. 安装卸载nginx

    http://www.nginx.cn/install ubuntu和debain下的apt方式安装软件很方便,特别是对于新手安装和卸载nginx. 由于nginx不能动态添加模块,所以会经常安装和卸 ...

  5. python 几个循环的效率测试

    前言:对于我这种追求极致的人来说,效率很重要. 前面看到网上关于python循环的测评,到自己在项目中的应用,发现,并不是这么回事.所以,写下次博文,一次性了解这个问题. 语言版本:python3.6 ...

  6. Pytest自动化测试 - 简易教程

    简介 pytest是动态编程语言Python专用的测试框架,它具有易于上手.功能强大.可扩展性好.兼容性强.效率高.第三方插件丰富等特点. 功能特征: 完整的文档,包括安装,教程和PDF文档 简单而又 ...

  7. js 时间日期与时间戳之间转换

    1 1.将时间(2017-08-10)转换时间戳 2 var startTime = '2017-08-10'; 3 var startdate = new Date(Date.parse(start ...

  8. 通过PHPExcel将Excel表文件中数据导入数据库

    1 <?php 2 header("Content-Type:text/html;charset=utf-8"); 3 include_once 'PHPExcel.php' ...

  9. DFS序专题

    牛客专题之DFS序 简介 dfs序: 每个节点在dfs深度优先遍历中的进出栈的时间序列,也就是tarjan算法中的dfn数组. 画个图理解一下: 这棵树的dfs序:1 3 2 4 2 5 6 7 6 ...

  10. OpenCV计算机视觉学习（12）——图像量化处理&图像采样处理（K-Means聚类量化，局部马赛克处理）

    如果需要处理的原图及代码,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice 准备 ...