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

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

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

　　  插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的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. 02Java写一个hello world

    新建一个.text文件 输入并保存如下代码: public class HelloWorld{ public static void main(String[] args){ System.out.p ...

  2. centos 6 系统下同步本地时间

    1.date显示系统时间 [root@oldboy ~]# dateTue Mar 31 22:45:55 CST 2020   #CST是指是指某中标准时间 非东八区时间 更改时间的三种方法 1.c ...

  3. 我要进大厂之大数据Hadoop HDFS知识点（2）

    01 我们一起学大数据 老刘继续分享出Hadoop中的HDFS模块的一些高级知识点,也算是对今天复习的HDFS内容进行一次总结,希望能够给想学大数据的同学一点帮助,也希望能够得到大佬们的批评和指点! ...

  4. vue项目中echarts属性总结

    <div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: ...

  5. 面试阿里，腾讯，字节跳动90%都会被问到的Spring中的循环依赖

    前言 Spring中的循环依赖一直是Spring中一个很重要的话题,一方面是因为源码中为了解决循环依赖做了很多处理,另外一方面是因为面试的时候,如果问到Spring中比较高阶的问题,那么循环依赖必定逃 ...

  6. 如何能够将MathType工具栏放大？

    作为专业的公式编辑器,MathType受到了很多用户的青睐,因为借助它可以快速编写出想要的各种数学公式.但是有的用户发现MathType工具栏中的符号有一些小,那么为了方便使用,能不能将工具栏放大呢? ...

  7. AFNetWorking 丢失数据

    问题描述: 使用AFNetWorking请求数据,请求成功,但是拿不到所需要的数据,但是使用其他平台都可以拿到数据. 原因分析: AFNetWorking无法解析. 解决方式: AFJSONRespo ...

  8. sentinel配置

    登陆接口 QPS5,异常0.8,熔断10s 1.异地登陆同省逻辑降级security 2.可疑用户判断certification 3.是否是危险设备判断account 4.是否是自动化imei,ime ...

  9. Linux下使用Docker部署nacos-server（单机模式），丧心病狂的我在半夜给UCloud提交了一份工单

    1. 拉取nacos-server镜像 进入 Docker Hub 查看nacos-server最新版本为 nacos-server:1.4.0 配置阿里云镜像加速 sudo mkdir -p /et ...

  10. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...