圆盘抽奖
这个组件初始状态不指向奖品，而是指向缝隙
Api
参数：
| 名称 | 描述 |
|---|---|
| length |
奖品数量 |
| el | 容器ID |
属性：
playing 是否正在动画中
方法：
playto(n,callback) 旋转到第n个奖品，旋转结束运行callback回调
代码示例
<div id="ltpanel" class="panel"></div>
<script src="/js/zepto/zepto.min.js"></script>
<script src="/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>
方形抽奖（同时支持圆形）
原生 JavaScript 抽奖组件，支持rem移动端适配，无框架依赖。
Api
参数：
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| lighturl | string | '' | 外部光圈图片 |
| starturl | string | '' | 外部按钮图片 |
| width | number | 800 | 宽度 |
| height | number | 660 | 高度 |
| total | number | 18 | 抽奖产品的总数 |
| sbtnx | number | 239 | 开始抽奖按钮的位置x坐标 |
| sbtny | number | 130 | 开始抽奖按钮的位置y坐标 |
| sbtnw | number | 320 | 开始抽奖按钮的宽度 |
| sbtnh | number | 100 | 开始抽奖按钮的高度 |
| boxw | number | 100 | 奖品光效的宽度 |
| boxh | number | 100 | 奖品光效的高度 |
| position | string | "19_20, 128_20, 348_19, 569_239, 679_239" | 奖品光效的位置，对应奖品图片的布局，填入每个奖品的位置以及角度用逗号分割x_y_rotation（角度为0的可以不填写）例如19_20或者19_20_0表示第一个奖品的位置x坐标为19px y坐标为20px角度为0。） |
| contentId | string | 容器 | 嵌入抽奖模块的div层的id |
| onClickRollEvent | function | 点击开始的回调事件 | |
| onCompleteRollEvent | function | 完成的回调事件 | |
| b | string | null | 圆盘的图片，不填时 自动载入容器“contentId”下第一张图片 |
| s | string | null | 开始抽奖按钮图片 |
| bx | number | null | 圆盘的图片位置x坐标（转盘的中心点坐标为（0,0）） |
| by | number | null | 圆盘的图片位置y坐标 |
| sx | number | null | 开始抽奖按钮x坐标 |
| sy | number | null | 开始抽奖按钮y坐标 |
| sw |
number | 100 | 开始抽奖按钮宽度 |
| sh | number | 100 | 开始抽奖按钮高度 |
| unit | string | px | 尺寸单位 |
方法：
enable() 禁用
disable() 启用
stopRoll(index) 停止到所在的位置，在onClickRollEvent事件中调用。
reset() 重置
代码示例
方形示例
<div id="lotterycontent">
<img src="bg.png" style="">
</div>
<script src="/js/delottery/lottery.js"></script>
<script>
//开始抽奖
function callJsToStart(lotteryObj){
// 这里是演示随机转到奖品0~9的一个数字
// 初始的指针右侧开始
// 顺时针方向开始算
// 第一个奖品是0
var prize = Math.floor(Math.random() * 10);
lotteryObj.stopRoll(prize)
}
//动画完成
function callJsToComplete(prize){
alert("你的奖品是："+prize);
}
new Lottery({
'lighturl':'/images/p3_lottery_cur.png',
'total':10,
'width':6.8,
'height':4.99,
'sbtnx':1.85,
'sbtny':1.79,
'sbtnw':3.09,
'sbtnh':1.04,
'boxw':1.51,
'boxh':1.4,
'position':"0.2_0.22,1.81_0.22,3.45_0.22,5.08_0.22,0.2_1.76,5.08_1.76,0.2_3.33,1.81_3.33,3.45_3.33,5.08_3.33",
'contentId' : 'lotterycontent',
'onClickRollEvent' : callJsToStart,
'onCompleteRollEvent':callJsToComplete ,
'unit':"rem",
'isResponsive':0
});
</script>
圆盘示例
这个组件初始化指向一个奖品
<div id="lotterycontent">
<img src="bg.png" style="">
</div>
<script>
new Lottery({
'r':8,//奖品总数
'width':488,//宽度
'height':488,//高度
's':'/images/lottery/circle/z.png',//开始抽奖按钮图片
'bx':0,//圆盘的图片位置x坐标 （转盘的中心点坐标为（0,0））
'by':0,//圆盘的图片位置y坐标
'sx':0,//开始抽奖按钮x坐标
'sy':0,//开始抽奖按钮y坐标
'contentId' : 'lotterycontent',//容器层的 id
'onClickRollEvent' : callJsToStarto,//对应上面接口
'onCompleteRollEvent':callJsToCompleteo //对应上面接口
});
</script>