guagua.js 刮刮卡js插件-BFW插件库

guagua.js 刮刮卡js插件

第一步引入bfwone

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["guagua"], function() {
                var canvas = new canvasInit({
                    id: 'canvas',
                    text: '刮开抽奖',
                    cover: '#1f1f1f',
                    coverType: 'color',
                    width: 300,
                    height: 180,
                    drawPercentCallback: (num) => {
                        if (num > 30) {
                            alert('恭喜获得一等奖')
                            canvas.fresh() // 重置
                        }
                    }
                })
                $(".bk").css("text-indent",0);
            });
        });
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            margin: 80px;
            position: relative;
            width: 300px;
            height: 180px;
        }
        #canvas {
            position: absolute;
            width: 300px;
            height: 180px;
            top: 0;
            left: 0;
            z-index: 5;
        }
        .bk {
            width: 300px;
            height: 180px;
            background: #fff;
            position: absolute;
            text-indent: -2000px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 180px;
        }
        #freshBtn {
            margin-left: 100px;
            user-select: none;
            background: #ddd;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>


<body>
    <div class="box">
        <div class="bk">
            一等奖
        </div>
        <canvas id="canvas"></canvas>
    </div>
    <div id="freshBtn">
        重置
    </div>
</body>
</body>
</html>

guagua.js 刮刮卡js插件

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js