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

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

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

　　  插件有些要修改的地方，打开图像擦除插件后可以看下方网友讨论，或者直接下载本博客文件中的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 状态报警告 pool rbd has many more objects per pg than average (too few pgs?)

    定位问题 [root@lab8106 ~]# ceph -s cluster fa7ec1a1-662a-4ba3-b478-7cb570482b62 health HEALTH_WARN pool ...

  2. Python_爬虫_urllib解析库

    简介:提取网页保存到txt文件中 + 解析txt文件内容,取出内容 from urllib import request import re.json url="http://www.163 ...

  3. JPA、Hibernate、Spring-Data-Jpa的本质区别

    什么是JPA? 全称Java Persistence API,可以通过注解或者XML描述[对象-关系表]之间的映射关系,并将实体对象持久化到数据库中. 为我们提供了: 1)ORM映射元数据:JPA支持 ...

  4. python实现一个无序单链表

    class Node: """先定一个node的类""" def __init__(self, value=None, next=None) ...

  5. 推荐系统实践 0x06 基于邻域的算法（1）

    基于邻域的算法(1) 基于邻域的算法主要分为两类,一类是基于用户的协同过滤算法,另一类是基于物品的协同过滤算法.我们首先介绍基于用户的协同过滤算法. 基于用户的协同过滤算法(UserCF) 基于用户的 ...

  6. Linux没有netstat和ifconfig命令问题

    安装了精简版命令行centos7系统,运行netsta查看端口和ifconfig查看IP命令都提示找不到命令. 解决方法: yum search ifconfig 通过yum search 这个命令我 ...

  7. day008|python之函数

    函数 目录 函数 1 Type hinting 2 函数参数 2.1 概述 2.2 参数详解 2.3 参数的使用 2.4 可变长函数-->*与**的应用 2.6 命名关键字形参 3 函数对象 3 ...

  8. iOS 百度地图使用详解

    最近仿照美团做了款应用,刚好用到百度地图,高德地图之前用的比较多,只是这个项目的后台服务器是另外一个公司做的,他们用的就是百度地图,现在网上用百度地图的还不算太多,博文也是断断续续的,主要是中间跳跃有 ...

  9. Jmeter(二十九) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy2（详解教程）

    1.简介 上一篇文中已经对Badboy做了一个基本上详细完整的介绍,这一篇宏哥带你们实战一下,这一篇主要讲解和分享:录制和运行脚本.参数化 首先让我们使用N模式录制一个脚本,测试用例编号为:1.1.1 ...

  10. websocket服务端开发

    基于http请求以拉的方式去做服务器的推送,无论是实时性和有效字节都是差强人意的效果. 公司的im系统在与客户端的交互上实际上借助了websocket来实现服务器与客户端的事实消息推送,今天就来简单了 ...