抽奖组件

使用场景：PC端和移动端
浏览器兼容情况：
方形抽奖：IE7/IE8/IE9/IE10/IE11/CHROME/FIREFOX/SAFARI 等浏览器
圆形抽奖：暂不支持IE8及以下版本

组件信息

组件CDN：

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

编码格式：gbk

参数说明

• width:Number 宽度；默认值:800
• height:Number 高度；默认值:660
• contentId:String 嵌入抽奖模块的div层的id；默认值:swfcontent
• onClickRollEvent:Function 点击开始抽奖，调用的函数；具体值参看示例；
• onCompleteRollEvent:Function 抽奖动画结束时调用的函数；具体值参看示例；

[方形抽奖]特有参数

• lighturl:String 外部光圈png，不填写就用默认的效果；默认值:''
• starturl:String 外部按钮png不填写就用默认的按钮效果；默认值:''
• total:Number 抽奖产品的总数；默认值:18
• sbtnx:Number 开始抽奖按钮的位置x坐标；默认值:239
• sbtny:Number 开始抽奖按钮的位置y坐标；默认值:130
• sbtnw:Number 开始抽奖按钮的宽度；默认值:320
• sbtnh:Number 开始抽奖按钮的高度；默认值:100
• boxw:Number 奖品光效的宽度；默认值:100
• boxh:Number 奖品光效的高度；默认值:100
• position:String 奖品光效的位置，对应奖品图片的布局，填入每个奖品的位置以及角度用逗号分割x_y_rotation（角度为0的可以不填写）例如19_20或者19_20_0表示第一个奖品的位置x坐标为19px y坐标为20px角度为0。）；默认值:19_20, 128_20, 348_19, 569_239, 679_239

[圆形抽奖]特有参数

• r:Number 奖品总数；默认值:null
• s:String 开始抽奖按钮图片路径；默认值:''
• bx:Number 圆盘的图片位置x坐标；默认值:0
• by:Number 圆盘的图片位置y坐标；默认值:0
• sx:Number 开始抽奖按钮x坐标；默认值:0
• sy:Number 开始抽奖按钮y坐标；默认值:0

[方形抽奖]代码示例

<style>
    .lottery {position: relative;width: 800px;height: 360px;margin-top: 20px;margin-left: 20px;}
</style>
<div class="lottery" id="lotterycontent">
    <img src="//ossweb-img.qq.com/images/js/delottery/lotterybg.jpg" alt='奖品' width="800" height="360">
</div>
<script src="//game.gtimg.cn/images/js/delottery/lottery.js"></script>
<script>
    //点击开始抽奖 通知js flash->js

    //开始抽奖lottery->js
    function callJsToStart() {
        lottery.disable();
        calllotteryToRoll(4);
    }
    //开发获得抽奖结果 通知lottery开始播放效果 js->lottery
    function calllotteryToRoll(id) {
        if (lottery) lottery.stopRoll(id);
    }
    //动画完成通知js lottery->js        
    function callJsToComplete() {
        alert('恭喜你获得大奖哟！！');
    }

    //初始化抽奖的 可以不知道内部
    var lottery = new Lottery({
        'lighturl': '//ossweb-img.qq.com/images/js/delottery/sel.png',//外部光圈png 不填写就用默认的效果
        'starturl': '//ossweb-img.qq.com/images/js/delottery/blankstartbtn.png', //外部按钮png 不填写就用默认的按钮效果
        'width': 800,//lottery 宽度
        'height': 360,//lottery 高度
        'total': 18,//抽奖产品的总数
        'sbtnx': 239,// 开始抽奖按钮的位置x坐标
        'sbtny': 130,// 开始抽奖按钮的位置y坐标
        'sbtnw': 320,// 开始抽奖按钮的宽度
        'sbtnh': 100,// 开始抽奖按钮的高度
        'boxw': 100,// 奖品光效的宽度
        'boxh': 100,//奖品光效的高度 
        'position': "19_20,128_20,238_20,348_19,459_19,568_19,679_19,19_129,128.8_129,568_129,678_129,19_240,128_240,238_240,349_240,459_239,569_239,679_239",
        //奖品光效的位置，对应奖品图片的布局，填入每个奖品的位置以及角度用逗号分割 x_y 例如19_20或者19_20_0 表示第一个奖品的位置 x坐标为19px y坐标为20px 角度为0。）
        'contentId': 'lotterycontent',//嵌入lottery 的div层的 id 
        'onClickRollEvent': callJsToStart,//对应上面接口
        'onCompleteRollEvent': callJsToComplete //对应上面接口
    });
</script>

用法示例：http://game.gtimg.cn/images/js/delottery/index.html#square

[圆形抽奖]代码示例

<style>.lottery{position: relative;width: 500px;height: 500px;}</style>
<div class="lottery" id="lotterycontent">
<img src="//game.gtimg.cn/images/js/delottery/g.png"width="488"height="488"alt="奖品">
</div>
<script src="//game.gtimg.cn/images/js/delottery/lottery.js"></script>
<script>
//点击开始抽奖 通知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':'//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 //对应上面接口
});
</script>

用法示例：http://game.gtimg.cn/images/js/delottery/index.html#round