原生 JavaScript 抽奖组件，支持移动端适配，无框架依赖，抵制 FLASH ！

兼容：IE7/IE8/IE9/IE10/IE11/CHROME/FIREFOX/SAFARI 等浏览器

原FLASH版抽奖参数配置项可原封不动移植！

来支持组件~！

新增 REM 支持

源码示例 活动应用示例

Demo1

源码示例

先引入lottery.js

<script src="//game.gtimg.cn/images/js/delottery/lottery.js"></script>

HTML

<div class="lottery" id="lotterycontent" style="">
    <img src="bg.png" style="">
</div>

CSS

.lottery{position: relative; width: 934px; height:622px; margin-top: 20px; margin-left: 20px;}

JAVASCRIPT

//开始抽奖lottery->js
 function callJsToStart(){
    calllotteryToRoll(4);
}
//开发获得抽奖结果 通知lottery开始播放效果 js->lottery
 function calllotteryToRoll(id){
    if(lottery)lottery.stopRoll(id);
}
//动画完成通知js  lottery->js
 function callJsToComplete(){
    alert('恭喜你获得大奖哟！！');
}
 
    //初始化抽奖的 可以不知道内部
 var lottery= new Lottery({
    'lighturl':'http://ossweb-img.qq.com/images/js/delottery/light.png',
    'starturl':'http://ossweb-img.qq.com/images/js/delottery/blankstartbtn.png',
    'total':12,
    'width':935,
    'height':623,
    'sbtnx':179,
    'sbtny':398,
    'sbtnw':205,
    'sbtnh':54,
    'boxw':154,
    'boxh':156,
    'position':"157_0,313_0,469_0,625_0,781_156,781_312,626_467,470_467,314_467,158_467,1_312,1_156",
    'contentId' : 'lotterycontent',
    'onClickRollEvent' : callJsToStart,
    'onCompleteRollEvent':callJsToComplete 
});

Demo2

Demo3 圆盘抽奖

源码示例

先引入lottery.js

html

<div class="lottery" id="lotterycontent" style="">
    <img src="http://ossweb-img.qq.com/images/js/delottery/bg.png" style="">
</div>

javascript

//点击开始抽奖 通知js  flash->js
function callJsToStarto(){
    //alert(11);
//测试
    callFlashToRollo(2);
}
//开发获得抽奖结果 通知flash开始播放效果 js->flash
function callFlashToRollo(id){
    //alert(22)
    //通知转盘转到对应的中奖产品的id （序号从0,1,2.....，0是指针初始指示的位置，沿着顺时针的方向递增）
    if(SWFOBJo)SWFOBJo.stopRoll(id);
}
//3、flash动画完成通知js  flash->js
function callJsToCompleteo(){
    SWFOBJo.enable()
    alert('恭喜你获得大奖XXXX哟！！');
}
    //初始化抽奖对象的SWFOBJ 
    //转盘的中心点坐标为（0,0））
var SWFOBJo= new Lottery({
        'r':8,//奖品总数
        'width':488,//flash宽度
        'height':488,//flash高度
                's':'http://ossweb-img.qq.com/images/flash/lottery/circle/z.png',//开始抽奖按钮图片
        'bx':0,//圆盘的图片位置x坐标 （转盘的中心点坐标为（0,0））
        'by':0,//圆盘的图片位置y坐标
        'sx':0,//开始抽奖按钮x坐标
        'sy':0,//开始抽奖按钮y坐标
        'contentId' : 'swfcontent',//嵌入swf 的div层的 id 
        'onClickRollEvent' : callJsToStarto,//对应上面接口
        'onCompleteRollEvent':callJsToCompleteo //对应上面接口
});

参数解析

重置抽奖：使用reset方法，lottery.reset(); 或者使用lottery.enable(),解锁抽奖按钮但不清空上次抽奖位置。