jQuery手機端九宮格抽獎代碼



96 383 128



特效描述:jQuery手機端 九宮格抽獎代碼,jQuery手機端九宮格抽獎代碼

代碼結構

1. 引入CSS

<link href="css/layer.css" rel="stylesheet" type="text/css" />
<link href="css/layer.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="js/layer.js"></script>
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="js/layer.js"></script>

3. HTML代碼

?<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>jQuery手機端九宮格抽獎代碼</title>
<style>
	*, :after, :before {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	* {
		margin: 0;
		padding: 0;
	}
	main{padding-top: 3em;}
	table {
		border-spacing: 0;
		border-collapse: collapse;
		text-align: center;
	}
	.draw {
		width: 560px;
		height: 600px;
		margin: 0 auto;
		padding:51px;
		background-image: url(images/bg.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.draw .item {
		width: 150px;
		height: 150px;
		background-image: url(images/bg1.png);
		background-repeat: no-repeat;
		background-size: 96%;
	}
	.draw .item.active {
		background-image: url(images/bg2.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.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;
		text-decoration: none;
		background-image: url(images/bg3.png);
		background-repeat: no-repeat;
		background-size: 96%;
	}
</style>
</head>
<body ng-app="mainApp" ng-controller="indexCtrl" style="background: #f02d2f;">
<div class="headerWrapper container-fluid">
</div>
<main style="background: #f02d2f;">
	<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">終身VIP會員</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">三年VIP會員</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">半年VIP會員</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">399元充值卡一張</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">100元充值卡一張</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">免費體驗一次</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">九折優惠券一張</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">參與大禮包一份</span>
				</td>
			</tr>
		</table>
	</div>
</main>
<!--Import Copyright -->
<!--彈窗layer-->
<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);
			layer.open({
			   type: 1,			           
			   shadeClose: true,
			   shade: false,
			   maxmin: true, //開啟最大化最小化按鈕
			   area: ['893px', '600px'],
			   content: $("#info").html()
			});
			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>
<div id='info' style = "display : none">
   <a href=""><img src="images/tk_img.png"></a>
   <h1>100元</h1>
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文字提示框 提示文字 按鈕控制 抽獎 轉盤抽獎
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子