js实现刮刮卡抽奖

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

   链接:图像擦除插件(下载及教程讲解)

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

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

效果如图:

原文地址:https://www.cnblogs.com/nanyang520/p/11150250.html

时间: 2024-10-10 04:14:21

js实现刮刮卡抽奖的相关文章

中奖概率算法(php 可用于刮刮卡,大转盘等抽奖算法)

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内, * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间, * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的. * 这样 筛选到最终,总

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <!--?

paip.刮刮卡砸金蛋抽奖概率算法跟核心流程.

#---抽奖算法需要满足的需求如下: 1 #---抽奖核心流程 1 #---问题???更好的算法 2 #---实际使用的扩展抽奖算法(带奖品送完判断和每用户最大中奖判断) 2 #-------网上的抽奖算法Php 3 #----java版本的.. 4 参考 5 #---抽奖算法需要满足的需求如下: 1.可以控制中奖的概率 2.具有随机性 3.最好可以控制奖品的数量 4.根据用户ID或者ip.手机号.QQ号等条件限制抽奖次数 初期就这些需求,然后根据网上的资料,采用了一种阶段式抽取的方法,大家下面

【回忆1314】抽奖之手机刮刮卡

直接看效果点这里(记得模拟手机噢) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" /&g

Atitit .html5刮刮卡的gui实现总结

Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....postion:absoluti..高度宽度都是100% 1 #---2.初始化wScratchPad 1 #-----判断抽奖机会已经用完and 遮罩挠完33%走自动清空mask.. 2 #-----设置mask图片加载后的事件(初始化悬浮图片top位置>>ajax开始>>加载bingo/no

网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜欢这种方式. 你可能会很好奇, 它是如何实现的呢? 本文将阐述其原理, 并结合具体实例来演示如何借助H5的canvas来实现类刮刮卡的效果. 展示效果: 网页闯关游戏入口(请狠狠地点击我, ^_^) http://magic.mmxfgame.com. H5刮刮卡的实例源自第六关--拜访东方不败的故

用c#开发微信 (16) 微活动 2 刮刮卡

微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公众账号关注.对于企业来说,做微信推广重要的一个方面就是提高用户和公众账号之间的黏度,而微信刮刮卡就是其中最为常见的活动. 下面详细介绍: 一.使用 1. 新建一个刮刮卡的活动: 2. 奖项设置 3. 保存后,在微信里给公众号发一个“刮刮卡”的消息, 就会收到刮刮卡的内容,进入活动后,就可以刮奖了 二

封装了一个H5刮刮卡插件

下班后,闲着无事,刚好近期在学习画布相关知识,就写了个demo练一下手.高手路过,多多指点! 简单介绍一下页面整体结构: 1 <div class="wrap"> 2 <canvas class="page can" id="can" width="640" height="1136"></canvas> 3 <div class="page index&

weiphp 刮刮卡控制器代码

1 <?php 2 3 namespace Addons\Scratch\Controller; 4 5 use Home\Controller\AddonsController; 6 7 class ScratchController extends AddonsController { 8 function edit() { //编辑刮刮卡的方法 9 $id = I ( 'id' ); //获取传参的id 10 $model = $this->getModel (); //获取model数