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

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

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

　　  插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的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. Ceph如何实现文件系统的横向扩展

    前言 在跟一个朋友聊天的时候,聊到一个技术问题,他们的一个环境上面小文件巨多,是我目前知道的集群里面规模算非常大的了,但是目前有个问题,一方面会进行一倍的硬件的扩容,而文件的数量也在剧烈的增长着,所以 ...

  2. 精尽 MyBatis 源码分析 - 基础支持层

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

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

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

  4. python 中 try...finally... 的优雅实现

    1. 关于 try.. finally.. 假如上帝用 python 为每一个来到世界的生物编写程序,那么除去中间过程的种种复杂实现,最不可避免的就是要保证每个实例最后都要挂掉.代码可简写如下: tr ...

  5. 「LOJ 539」「LibreOJ NOIP Round #1」旅游路线

    description 题面较长,这里给出题目链接 solution 考虑预处理出\(f[i][j]\)表示在第\(i\)个点加满油后,从第\(i\)个点出发,至多消耗\(j\)元钱走过的最大路程,那 ...

  6. leetcode 1046

    class Solution {       public int lastStoneWeight(int[] stones) {        MaxHeap s=new MaxHeap(stone ...

  7. Shamir秘密共享方案 (Python)

    Shamir's Secret Sharing scheme is an important cryptographic algorithm that allows private informati ...

  8. zabbix 用Telegram报警！！！

    第一步:先在Telegram 注册个机器人!!! @BotFather在Telegram中添加联系人并按"开始",然后键入: /newbot输入你要新建的机器人名称在电报中@你的机 ...

  9. 技巧：如何区分dll程序集的编译目标平台（同样适用于查看程序集的其它依赖）

    我们在进行net core迁移过程中,有时候需要区分一个dll是针对netstandard平台还是net framework. 本文提供一个技巧来快速区分:通过工具dnSpy打开目标dll,按照如下截 ...

  10. 使用zabbix监控Jenkins

    一.监控架构图 二.实现思路 在 Jenkins 上安装 Metrics 插件,使 Jenkins 暴露 metrics api: 编写python代码从api抓取数据,并将数据解析为zabbix可以 ...