移动端圆盘抽奖

使用场景：移动端
主要适用于欢乐拼三张、天天德州 活动专题

组件说明

• 移动端使用，主要是用于欢乐拼三张、天天德州 活动专题
• 圆盘抽奖，指针不动，圆盘转动
• 与 另一个圆盘抽奖 的区别是，这个组件初始状态不指向奖品，而是指向缝隙

Demo演示

新窗口打开

使用方法

1. 按照设计稿，调好转盘、指针的样式和位置
2. js调用，参数填写奖品数量、指定指针元素

API

属性：

playing:是否正在动画中

方法：

playto(n,callback)：旋转到第n个奖品，旋转结束运行callback回调

示例代码

<div id="ltpanel" class="panel"></div>
<script src="//game.gtimg.cn/images/js/zepto/zepto.min.js"></script>
<script src="//game.gtimg.cn/images/js/loteryround/ossweb-img/loteryround.min.js"></script>
<script>
// 转盘初始化
// 第一个参数是奖品的个数
// 第二个是用来旋转的圆盘（指针不动）
var panel=new PanelLotery({
    length:8,
    //duration:5000, //动画的时间，默认5秒，可不填
    el:'#ltpanel'
});

$('.panel-btn').on('click', function(event) {
    event.preventDefault();
        if(panel.playing) return;
        // 这里是演示随机转到奖品n
        // 初始的指针右侧开始
        // 顺时针方向开始算
        // 第一个奖品是n=0
        var n=Math.floor(Math.random()*8);
        console.log(n);
        panel.playto(n,function(){
        alert(n);
    });
});
</script>