jquery.wheelOfFortune.js 大转盘jquery插件-BFW插件库

jquery.wheelOfFortune.js 大转盘jquery插件

第一步引入bfwone，加载依赖项jquery和rotate

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery.rotate.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(['jquery.wheelOfFortune'], function() {
                $("#wheel_container").wheelOfFortune({
                    'wheelImg': "http://repo.bfw.wiki/bfwrepo/image/wheel.png", //转轮图片
                    'pointerImg': "http://repo.bfw.wiki/bfwrepo/image/pointer.png", //指针图片
                    'buttonImg': "http://repo.bfw.wiki/bfwrepo/image//button.png", //开始按钮图片
                    //'wSide': 400,                                                      //转轮边长(默认使用图片宽度)
                    //'pSide': 191,                                                      //指针边长(默认使用图片宽度)
                    //'bSide': 87,                                                       //按钮边长(默认使用图片宽度)
                    'items': {
                        2: [41, 128], 3: [129, 219], 4: [220, 310], 1: [311, 400]}, //奖品角度配置{键:[开始角度,结束角度],键:[开始角度,结束角度],......}
                    'pAngle': 270, //指针图片中的指针角度(x轴正值为0度，顺时针旋转 默认0)
                    //'type': 'w',                                                       //旋转指针还是转盘('p'指针 'w'转盘 默认'p')
                    //'fluctuate': 0.5,                                                  //停止位置距角度配置中点的偏移波动范围(0-1 默认0.8)
                    //'rotateNum': 12,                                                   //转多少圈(默认12)
                    //'duration': 6666,                                                  //转一次的持续时间(默认5000)
                    'click': function () {
                        var key = parseInt(Math.random() * 4) + 1;
                        $("#wheel_container").wheelOfFortune('rotate', key, 'w');
                    }, //点击按钮的回调
                    'rotateCallback': function (key) {
                        alert("啪:" + key);
                    }                                                                   //转
                });

            });

        });
    </script>
</head>
<body>
    <div id="wheel_container"></div>
</body>
</html>

jquery.wheelOfFortune.js 大转盘jquery插件

网友评论0

vconsole.js

ntc.js

classie.js

jquery.wheelOfFortune.js

guagua.js

qrcode.js

tracking-min.js

Scratch.js

crossroads.js

jscapture.js