方形抽奖组件

组件说明

  • 原生 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