基本信息
源码名称：HTML5砸金蛋手机抽奖活动代码
源码大小：1.31M
文件格式：.zip
开发语言：PHP
更新时间：2017-01-17
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍
HTML5砸金蛋手机抽奖活动代码

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1 maximum-scale=2, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Add to Home">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<title>HTML5砸金蛋手机抽奖活动代码</title>
<link href="css/publi.css" rel="stylesheet" type="text/css">
<link href="css/chuyouwuyi01.css" rel="stylesheet" type="text/css">
<script src="js/jquery1.8.3.min.js"></script>
<script type="text/javascript">
	var phoneWidth = parseInt(window.screen.width);
	var phoneScale = phoneWidth / 640;
	var ua = navigator.userAgent;
	if (/Android (\d \.\d )/.test(ua)) {
		var version = parseFloat(RegExp.$1);
		// andriod 2.3
		if (version > 2.3) {
			document.write('<meta name="viewport" content="width=640, minimum-scale = '   phoneScale   ', maximum-scale = '   phoneScale   ', target-densitydpi=device-dpi">');
			// andriod 2.3以上
		} else {
			document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
		}
		// 其他系统
	} else {
		document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
	}
</script>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>

<body>
<!-- ====================================loading -->
<!--<section id="loading"></section>-->
<!-- ====================================页面开始 -->
<!--登录-->
<section class="zadan">
	<div class="zd_middle">
		<div class="zd_zadan">
			<div class="zd_bg">
				<img src="img/160615zadan/zd_cion18.png"  class="zd_bg01">
				<img src="img/160615zadan/zd_cion18.png"  class="zd_bg02">
			</div>
			<div class="zd_jindan ">
				<img src="img/160615zadan/zd_cion16.png">
			</div>
			<ul class="zd_bigcaidai">
				<li class="cardai01 cardai">
					<img src="img/160615zadan/zd_cion15.png">
				</li>
				<li class="cardai02 cardai">
					<img src="img/160615zadan/zd_cion14.png">
				</li>
				<li class="cardai03 cardai">
					<img src="img/160615zadan/zd_cion13.png">
				</li>
				<li class="cardai04 cardai">
					<img src="img/160615zadan/zd_cion12.png">
				</li>
				<li class="cardai05 cardai">
					<img src="img/160615zadan/zd_cion11.png">
				</li>
				<li class="cardai06 cardai">
					<img src="img/160615zadan/zd_cion10.png">
				</li>
			</ul>
			<div class="zd_chuizi">
				<img src="img/160615zadan/zd_cion01.png">
			</div>
			<div class="zd_txt">
				<input type="text" id="iphone1" placeholder="请输入手机号" />
				<a href="javascript:;" id="submit" class="mom_btn tc">
					<img src="img/160615zadan/zd_cion07.png">
				</a>
			</div>
		</div>
	</div>

</section>
<!--弹出层-->
<article id="tip">
	<div class="pack pack_yl">
		<h1 class="tc">温馨提示</h1>
		<p class="tc"></p>
		<a href="#">确定</a>
	</div>
</article>
<!-- 网站要用到的一些类库 -->

<script type="text/javascript">
	var checkPhone = function(a) {
		var patrn = /^((?:13|15|18|14|17)\d{9}|0(?:10|2\d|[3-9]\d{2})[1-9]\d{6,7})$/;
		if (!patrn.exec(a)) return false;
		return true;
	};
	$(function() {
		$(window).on("load", function() {
				$("#loading").fadeOut();
			})
			// ========================================浮层控制
		$("#tip .pack a").on("click", function() {
			$("#tip").fadeOut()
			$("#tip .pack p").html("")
			return false;
		})

		function alerths(str) {
			$("#tip").fadeIn()
			$("#tip .pack p").html(str)
			return false;
		}
		$("#submit").on("click", function() {
			$('html,body').animate({scrollTop:0}); 
			var str = $("#iphone1").val()
			if (str.length == 11 && checkPhone(str)) {
				// 判断是不是11位手机号，为真提交
				$(".zd_jindan").addClass("zd_jindan01");
				$(".cardai01").fadeIn(500);
				$(".cardai02").animate({
					top: '240px',
					left: '173px'
				}, 500);
				$(".cardai03").animate({
					top: '225px',
					left: '345px'
				}, 600);
				$(".cardai04").animate({
					top: '230px',
					left: '202px'
				}, 700);
				$(".cardai05").animate({
					top: '230px',
					left: '230px'
				}, 800);
				$(".cardai06").animate({
					top: '340px',
					left: '246px'
				}, 1000, function() {
					//写中奖后的东西
					$(".cardai").addClass("cardai07");
					$(".zd_jindan").removeClass("zd_jindan01");
					alerths("恭喜你获得苹果电脑")
				});
			} else {
				alerths("请输入正确的手机号！")
			}
			return false;
		})
	})
</script>

</body>
</html>