lottery-turntable - 抽奖转盘
这周五临时接到新项目,要做一个抽奖转盘,由于时间紧迫就找了个库,使用lottery-turntable这个库,因为"这个插件只实现了绘画转盘及转盘转动的模块. "可扩展性比较高,所已选择它
安装
npm install lottery-turntable
复制代码
相关说明
var turntable = new Turntable({
type: 'transition', //转盘转动类型
size: 320, //转盘尺寸,默认为320
textSpace: 15, //奖品名称距离转盘边距,默认为15
imgSpace: 50, //奖品图片距离转盘边距,默认为50
speed: 5, //触发start事件后,转盘开始转动的速度,数字必须能给360整除
fastSpeed: 10, //转盘进入高速转动的速度,数字必须能够给360整除
slowSpeed: 5, //转盘从高速转动降下来的速度,数字必须能够给360整除
speedUp: 2000, //多少毫秒后进入高速转动
speedDown: 2000, //触发stop事件后,多少毫秒进入缓速
values: [
{
id: 1, //奖品id,可以重复(比如:谢谢参与就可以有n个,中奖后会随即选择一个转动到该位置
name: '一等奖', //奖品名称
img: {
src: 'gift.png', //奖品图片路径
width: 50, //奖品图片宽度,请根据实际情况去设置,避免太大
height: 50, //奖品图片高度,请根据实际情况去设置,避免太大,与宽度等比率缩放
},
bg: '#ccc', //该奖品的在转盘中的扇形背景颜色
fill: '#000' //奖品名称的文字颜色
},
...
], //奖品对象,根据传多少个奖品对象,自动生成相应数量的转盘抽奖内容
container: document.getElementById('id') //转盘的容器,如果设置了之后,new Turntable的时候会自动填充内容
});
复制代码
事件说明
draw
将转盘实例化到容器当中,如果设置container
属性,则不需要调用该方法
turntable.draw(document.getElementById('container'));
复制代码
start
开始抽奖(开始转动转盘)
turntable.start();
复制代码
stop
抽奖结束(停止转动转盘)
turntable.stop(id, function(data) {
console.log(data); //对应在values里面的礼品对象
});
复制代码
goto
(只能用于transition
方式的抽奖)
//跳转到指定的id的奖品,在请求后台取得中奖奖品id后,就滚动到对应的奖品
turntable.goto(id, function(data) {
console.log(data); //对应在values里面的礼品对象
});
复制代码
核心文件就是turntable.js
,index.js
, tween.js
有兴趣的可以自己看下源码然后修改下,不是很难懂;
如果有更好的插件欢迎留言分享,谢谢。