头像

jQuery九宫格抽奖【原创

来源:http://www.sucaihuo.com/js/2876 素材火管理员 2017-08-30 23:07浏览(416) 收藏

一款jQuery九宫格抽奖,点击“立即抽奖”的按钮,会有一个黄色区块围绕九宫格的奖品不断的跳转,最后停在抽中的奖品上面,可以自行设置一下限制次数的功能。
jQuery九宫格抽奖
分类:抽奖 > 九宫格 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 2 下载资源 下载积分: 120 积分

页面的head部分,简单设置一下页面元素的样式,代码如下:

* { margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; text-align: center; }
.draw { width: 460px; height: 470px; margin: 0 auto; padding: 40px; background-image: url(images/bg.png);}
.draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); }
.draw .item.active { background-image: url(images/bg2.png); }
.draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; }
.draw .img img { vertical-align: top; }
.draw .gap { width: 5px; }
.draw .gap-2 { height: 5px; }
.draw .name { display: block; margin-top: 10px; font-size: 14px; }
.draw .draw-btn { display: block; height: 150px; line-height: 150px; border-radius: 20px; font-size: 25px; font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: none; }
.draw .draw-btn:hover { background-color: #fe8d85; }

页面的body部分,一个div容器里面放入一个table表格,里面有不同的奖品内容,代码如下:

<h1>jQuery九宫格抽奖</h1>
<div class="draw" id="lottery">
	<table>
		<tr>
			<td class="item lottery-unit lottery-unit-0">
				<div class="img">
					<img src="images/img1.png" alt="">
				</div>
				<span class="name">虚拟主机 1元/年</span>
			</td>
			<td class="gap"></td>
			<td class="item lottery-unit lottery-unit-1">
				<div class="img">
					<img src="images/img2.png" alt="">
				</div>
				<span class="name">VPS 1元/30天</span>
			</td>
			<td class="gap"></td>
			<td class="item lottery-unit lottery-unit-2">
				<div class="img">
					<img src="images/img3.png" alt="">
				</div>
				<span class="name">.top域名 1元/年</span>
			</td>
		</tr>
		<tr>
			<td class="gap-2" colspan="5"></td>
		</tr>
		<tr>
			<td class="item lottery-unit lottery-unit-7">
				<div class="img">
					<img src="images/img4.png" alt="">
				</div>
				<span class="name">免费主机1年</span>
			</td>
			<td class="gap"></td>
			<td class=""><a class="draw-btn" href="javascript:">立即抽奖</a></td>
			<td class="gap"></td>
			<td class="item lottery-unit lottery-unit-3">
				<div class="img">
					<img src="images/img5.png" alt="">
				</div>
				<span class="name">.com域名 19元/年</span>
			</td>
		</tr>
		<tr>
			<td class="gap-2" colspan="5"></td>
		</tr>
		<tr>
			<td class="item lottery-unit lottery-unit-6">
				<div class="img">
					<img src="images/img7.png" alt="">
				</div>
				<span class="name">.com域名 19元/年</span>
			</td>
			<td class="gap"></td>
			<td class="item lottery-unit lottery-unit-5">
				<div class="img">
					<img src="images/img6.png" alt="">
				</div>
				<span class="name">CDN加速 10元/15天</span>
			</td>
			<td class="gap"></td>
			<td class="item lottery-unit lottery-unit-4">
				<div class="img">
					<img src="images/img8.png" alt="">
				</div>
				<span class="name">20元快云币</span>
			</td>
		</tr>
	</table>
</div>

页面的底部,需引入jQuery库,并设置好抽奖事件的响应和相关参数,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var lottery = {
	index: -1,    //当前转动到哪个位置,起点位置
	count: 0,     //总共有多少个位置
	timer: 0,     //setTimeout的ID,用clearTimeout清除
	speed: 20,    //初始转动速度
	times: 0,     //转动次数
	cycle: 50,    //转动基本次数:即至少需要转动多少次再进入抽奖环节
	prize: -1,    //中奖位置
	init: function(id) {
		if ($('#' + id).find('.lottery-unit').length > 0) {
			$lottery = $('#' + id);
			$units = $lottery.find('.lottery-unit');
			this.obj = $lottery;
			this.count = $units.length;
			$lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
		};
	},
	roll: function() {
		var index = this.index;
		var count = this.count;
		var lottery = this.obj;
		$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
		index += 1;
		if (index > count - 1) {
			index = 0;
		};
		$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
		this.index = index;
		return false;
	},
	stop: function(index) {
		this.prize = index;
		return false;
	}
};

function roll() {
	lottery.times += 1;
	lottery.roll(); //转动过程调用的是lottery的roll方法,这里是第一次调用初始化
	
	if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
		clearTimeout(lottery.timer);
		lottery.prize = -1;
		lottery.times = 0;
		click = false;
	} else {
		if (lottery.times < lottery.cycle) {
			lottery.speed -= 10;
		} else if (lottery.times == lottery.cycle) {
			var index = Math.random() * (lottery.count) | 0; //静态演示,随机产生一个奖品序号,实际需请求接口产生
			lottery.prize = index;		
		} else {
			if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
				lottery.speed += 110;
			} else {
				lottery.speed += 20;
			}
		}
		if (lottery.speed < 40) {
			lottery.speed = 40;
		};
		lottery.timer = setTimeout(roll, lottery.speed); //循环调用
	}
	return false;
}

var click = false;

window.onload = function(){
	lottery.init('lottery');

	$('.draw-btn').click(function() {
		if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮,后面的点击不响应
			return false;
		} else {
			lottery.speed = 100;
			roll(); //转圈过程不响应click事件,会将click置为false
			click = true; //一次抽奖完成后,设置click为true,可继续抽奖
			return false;
		}
	});
};
</script>

九宫格抽奖带概率设置:http://www.sucaihuo.com/php/129.html

移动端九宫格带后台:http://www.sucaihuo.com/php/1854.html

标签: 九宫格抽奖
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:http://www.sucaihuo.com/js/2876.html
评论12
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 11楼
    09-20 11:11
    nbspnbsp
    好东东,收藏下
  • 头像 10楼
    09-14 11:17
    雪中叹@
    大家多多指教!!!!惊喜
  • 头像 9楼
    09-14 11:14
    雪中叹@
    希望代码精简!!!!!
  • 头像 8楼
    09-14 11:12
    雪中叹@
    非常好,学习提升的好地方
  • 头像 7楼
    09-13 09:15
    1140324011
    可以的。点赞,已保存。
  • 头像 6楼
    09-09 10:44
    php追求者
    积分啊,就差20了
  • 头像 5楼
    09-08 14:42
    bo5211ok
    留着有用!!!!!!!
  • 头像 4楼
    09-03 19:56
    jiaxiaoguan
    很好的,谢
  • 头像 3楼
    09-02 16:39
    輕描淡寫
    怎么没弹出得到的
  • 头像 板凳
    09-01 17:46
    I wanna thank you
    效果很棒,谢谢分享
1 2