移动端圆盘抽奖
当前版本:v1.0.0 最近更新:2016-12-01 组件维护:bozhou
组件说明
1、移动端使用,主要是用于欢乐拼三张、天天德州 活动专题
2、圆盘抽奖,指针不动,圆盘转动
3、与另一个圆盘抽奖(http://tgideas.github.io/motion/doc/data/component/mo.Lottery.html)的区别是,这个组件初始状态不指向奖品,而是指向缝隙
Demo演示
在线地址:http://game.gtimg.cn/images/js/loteryround/ossweb-img/demo.html
使用方法
第一步:
按照设计稿,调好转盘、指针的样式和位置
第二步:
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>