jQuery動畫扭蛋機抽獎代碼



如需定制開發(網站開發、二次開發)在線咨詢,請點擊>> QQ:753511799

1411 5642 1881



特效描述:jQuery動畫 扭蛋機抽獎。jQuery動畫扭蛋機抽獎代碼

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="niu_danji">
	<!--機器-->
	<div class="game_qu">
    	<!--go-->
        <div class="game_go">100/次</div>
         <div class="wdjifen">10000</div>
    </div>
    <!--球-->
    <div class="dan_gund">
        <span  class="qiu_1 diaol_1"></span>
        <span  class="qiu_2 diaol_2"> </span>
        <span  class="qiu_3 diaol_3"></span>
        <span  class="qiu_4 diaol_4"></span>
        <span  class="qiu_5 diaol_5"></span>
        <span  class="qiu_6 diaol_6"></span>>
        <span  class="qiu_7 diaol_7"></span>
        <span  class="qiu_8 diaol_8"></span>
        <span  class="qiu_9 diaol_9"></span>
        <span  class="qiu_10 diaol_10"></span> 
        <span  class="qiu_11 diaol_11"></span>   
    </div>
     <!--中獎掉落-->
   <div class="medon"><img src="images/mendong.png"></div>
   <div class="zjdl ">
   		<span></span>
   </div>
   </div>
<!--中獎 獲得一等獎-->
<div class="zonj_zezc none" id="jianpin_one">
	<div class="jpzs aiqiyi tc_anima">
    	<em><img src="images/close.png"></em>
        <h2>
        	<b>恭喜你!<br>獲得一等獎!</b>
        </h2>
    </div></div>
<!--中獎獲得二等獎-->
<div class="zonj_zezc none"  id="jianpin_two">
	<div class="jpzs aiqiyi tc_anima">
    	<em><img src="images/close.png"></em>
        <h2>
        	<b>恭喜你!<br>獲得二等獎!</b>
        </h2>
    </div>
</div>
<!--中獎 獲得三等獎-->
<div class="zonj_zezc none"  id="jianpin_three">
	<div class="jpzs aiqiyi tc_anima">
    	<em><img src="images/close.png"></em>
        <h2>
        	<b>恭喜你!<br>獲得三等獎!</b>
        </h2>
    </div>
</div>
<!--沒有中獎-->
<div class="zonj_zezc none" id="jianpin_kong">
	<div class="jpzs aiqiyi tc_anima">
    	<em><img src="images/close.png"></em>
        <h2>
        	咦?沒有抽中?
        </h2>
    </div>
</div>
<!--積分不足-->
<div class="zonj_zezc none" id="no_jifeng">
	<div class="jpzs aiqiyi tc_anima">
    	<em><img src="images/close.png"></em>
        <h2>
        	對不起,積分不足!
        </h2>
    </div>
</div>
<script>
$(document).ready(function(e) {
	//一等獎 關閉
	$("#jianpin_one em img").click(function(){
		$("#jianpin_one").hide();
		}
	);		
	//二等獎 關閉
	$("#jianpin_two em img").click(function(){
		$("#jianpin_two").hide();
		}
	);		
	//三等獎 關閉
	$("#jianpin_three em img").click(function(){
		$("#jianpin_three").hide();
		}
	);			
	//沒有中獎 關閉
	$("#jianpin_kong em img").click(function(){
		$("#jianpin_kong").hide();
		}
	);			
	//積分不足 關閉
	$("#no_jifeng em img").click(function(){
		$("#no_jifeng").hide();
		}
	);		
var score=470;
$(".wdjifen").html(score);
$(".game_go").click(function(){
	score-=100;
		if(score<0){
			for(i=1;i<=11;i++){
				$(".qiu_"+i).removeClass("wieyi_"+i);
			}
			$("#no_jifeng").show();
			}else{
				draw()
				}
		});
function draw(){
	var number =Math.floor(4*Math.random()+1);  
	for(i=1;i<=11;i++){
			$(".qiu_"+i).removeClass("diaol_"+i);
			$(".qiu_"+i).addClass("wieyi_"+i);
		};
	setTimeout(function (){
		for(i=1;i<=11;i++){
		$(".qiu_"+i).removeClass("wieyi_"+i);
		}
	},1100);	
	setTimeout(function(){
		switch(number){
			case 1:$(".zjdl").children("span").addClass("diaL_one");break;
			case 2:$(".zjdl").children("span").addClass("diaL_two");break;
			case 3:$(".zjdl").children("span").addClass("diaL_three");break;
			case 4:$(".zjdl").children("span").addClass("diaL_four");break;
		}
		$(".zjdl").removeClass("none").addClass("dila_Y");
				setTimeout(function (){
				switch(number){
					case 1:$("#jianpin_one").show();break;
					case 2:$("#jianpin_two").show();break;
					case 3:$("#jianpin_three").show();break;
					case 4:$("#jianpin_kong").show();break;
				}
			},900);
		},1100)
	//取消動畫
	setTimeout(function (){
			$(".zjdl").addClass("none").removeClass("dila_Y");
			$(".wdjifen").html(score);
			$(".zjdl").children("span").removeAttr('class');
		},2500)
}	
});
</script>



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


熱門標簽: 瀑布流 收藏 預覽 自適應頁面大小 響應式區塊列表布局 搖擺 煙花 清單樣式 照相機 注釋 下劃線 結構圖 鼠標懸停 條形碼 彈幕 畫板 朋友圈樣式 紅包 css繪制樣式 支付 圖文布局 右鍵菜單 html5動畫導航菜單 二維碼 文字提示框 html5圖片動畫 地圖 提示框/彈出層 html5文字動畫 計算器 layer 計時器 html5表情動畫 lightbox 桌面 html5線條動畫 跳轉 Tooltip工具提示框 步驟 浮動提示框 html5飄落動畫 鍵盤 html5彈窗動畫 html5光標動畫 簽到 分享 html5懸停動畫 點贊 投票 雪花 打印 答題 震動 圖表 鼠標滑過 抽獎 表情 qq空間 頭像截圖 星星打分評分 編輯器 播放器 電子雜志 排行榜 分頁翻頁 排序 表格隔行變色 table表格 進度條 多功能 加載動畫 彈出層拖動 窗口提示框 滑動星星打分 html5彈窗動畫 html5動畫h5動畫 其他更多 html5按鈕動畫
?
×
×
51前端

注冊

×
綁定手機

請綁定手機號,在繼續操作

×
單次下載支付

應付金額:279

支付完成后,回到下載頁面,在進行下載

官方QQ群
意見反饋
qq群

掃描上面二維碼加微信群

官方QQ群

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

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

林肯娱乐怎么赚钱 广东11选5,一天赚几万 天津11选五开奖结果32期 基金配资100万一年利息 股票不能配资 甘肃11选5五位走势图 河南22选5幸运之门 浙江12一定很牛 股票涨跌西部证券 大发快三开奖结果 股票融资交易流程