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

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

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

　　  插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的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. day02-多任务（进程和协程）

    一.多任务的概念       简单地说,就是操作系统可以同时运行多个任务.打个比方,你一边在用浏览器上网,一边在听MP3,一边在用Word赶作业,这就是多任务,至少同时有3个任务正在运行.还有很多任务 ...

  2. POJ1390 Blocks (区间DP)

    题目链接:POJ 1390.Blocks 题意: 有n个方块排成一列,每个方块有颜色即1到n的一个值,每次操作可以把一段相同颜色的方块拿走,长度为k,则获得的分数为 \(k\times k\),求可获 ...

  3. MathType中怎么打约化普朗克常数ħ

    普朗克常数记为ħ,是一个物理常数,用以描述量子大小.在量子力学中占有重要的角色,马克斯·普朗克在1900年研究物体热辐射的规律时发现的.如果要打出关于约化普朗克常数ħ的公式,就需要用到专业的公式编辑器 ...

  4. 牛逼哄哄的PageHelper分页插件到底是怎么实现的？网友：给我10分钟，给你写一个~

    Hi,各位读者们 PageHelper是一款好用的开源免费的Mybatis第三方物理分页插件,其实我并不想加上好用两个字,但是为了表扬插件作者开源免费的崇高精神,我毫不犹豫的加上了好用一词作为赞美. ...

  5. git操作之四：git branch（本地仓库）

    前面,介绍了git init/add/commit/restore/reset等git命令,今天介绍下git branch,这个命令是和分支相关的.首先要理解什么是分支,简单来说在协作开发中,每个人开 ...

  6. python 如何跳过异常继续执行

    使用try...except...语句,类似于if...else...,可以跳过异常继续执行程序,这是Python的优势 用法如下: 1 2 3 4 5 6 try:            # 可能会 ...

  7. Vue最简单的实现网页Live2D看板娘

    Live2D看板娘 前言 二.使用步骤 1.引入 2.设置样式 结尾(后续更新更强的配置看板娘~) 前言 最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自 ...

  8. celery配置与基本使用

    目录 1.celery配置与基本使用 1.1 安装celery 2.测试celery 2.1启动celery 1.celery配置与基本使用 1.1 安装celery # celery_task/ma ...

  9. 洛谷 P1284 三角形牧场 题解(背包+海伦公式)

    题目链接 题目大意 给你 n块木板(n<=40),每块木板长度为\(l[i]<=40\) 每块木板都要用,求最大的三角形面积×100,答案直接舍去小数 题目思路 首先如果已知三条边的长度可 ...

  10. xios封装

    封装的意义 1.提高代码可读性2.提高代码可维护性3.减少代码书写 封装 import axios from 'axios' axios.defaults.baseURL = 'http://127. ...