jQuery手機砸金蛋抽獎代碼



132 525 176



特效描述:jQuery 手機砸金蛋抽獎, <p>jQuery手機砸金蛋抽獎代碼</p>

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="js/jquery1.8.3.min.js"></script>
<script src="js/html5.js"></script>
<script src="js/respond.min.js"></script>

3. HTML代碼

<!-- ====================================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>
</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>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子