方形抽奖组件
组件说明
- 原生 JavaScript 抽奖组件,支持移动端适配,无框架依赖
- 兼容:IE7/IE8/IE9/IE10/IE11/CHROME/FIREFOX/SAFARI 等浏览器
- 禁止页面使用原本的flash版本抽奖,统一使用JS版本
示例代码:
<style>
.lottery {position: relative;width: 800px;height: 360px;margin-top: 20px;margin-left: 20px;}
</style>
<div class="lottery" id="lotterycontent">
<img src="http://ossweb-img.qq.com/images/js/delottery/lotterybg.jpg" alt='奖品' width="800" height="360">
</div>
<script src="http://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': 'http://ossweb-img.qq.com/images/js/delottery/sel.png',//外部光圈png 不填写就用默认的效果
'starturl': 'http://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>
DEMO演示
在线地址:http://game.gtimg.cn/images/js/delottery/index.html#round