利用jQuery實現老虎機游戲插件



101 403 135



特效描述:利用jQuery實現 老虎機游戲,利用jQuery實現老虎機游戲插件

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.slotmachine.js"></script>

3. HTML代碼

		<div class="line">
			<div class="content" style="text-align: center">
				<div style="clear:both;">
				<p class="title">Randomize your machines: </p>
					<p class="title">Randomize your machines: </p>
				</div>
				<div style="clear:both;">
					<div id="machine1" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine2" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine3" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="slotMachineButton1" class="slotMachineButton">GO!</div>
					<script>
						$(document).ready(function(){
							var machine1 = $("#machine1").slotMachine({
								active	: 0,
								delay	: 500
							});
							var machine2 = $("#machine2").slotMachine({
								active	: 1,
								delay	: 500
							});
							var machine3 = $("#machine3").slotMachine({
								active	: 2,
								delay	: 500
							});
							function onComplete($el, active){
								switch($el[0].id){
									case 'machine1':
										$("#machine1Result").text("Index: "+active.index);
										break;
									case 'machine2':
										$("#machine2Result").text("Index: "+active.index);
										break;
									case 'machine3':
										$("#machine3Result").text("Index: "+active.index);
										break;
								}
							}
							$("#slotMachineButton1").click(function(){
								machine1.shuffle(3, onComplete);
								setTimeout(function(){
									machine2.shuffle(3, onComplete);
								}, 500);
								setTimeout(function(){
									machine3.shuffle(3, onComplete);
								}, 1000);
							})
						});
					</script>
				</div>
				<div style="clear:both;">
					<div id="machine1Result" class="slotMachine noBorder" style="text-align:left">Index: 0</div>
					<div id="machine2Result" class="slotMachine noBorder" style="text-align:left">Index: 1</div>
					<div id="machine3Result" class="slotMachine noBorder" style="text-align:left">Index: 2</div>
					<div class="slotMachine noBorder"></div>
				</div>
			</div>
		</div>
		<div class="line" style="padding-top:50px;">
			<div class="content" style="text-align: center; background: url('./img/machine.png') no-repeat 50% 120px; height: 500px;">
				<div style="clear:both">
					<p class="title">Feel free to build your ouw casino! </p>
				</div>
				<div style="clear:both; margin-top: 250px;">
					<div id="machine4" class="slotMachine" style="margin-left: -65px;">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine5" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="machine6" class="slotMachine">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<script>
						$(document).ready(function(){
							var machine4 = $("#machine4").slotMachine({
								active	: 0,
								delay	: 500
							});
							var machine5 = $("#machine5").slotMachine({
								active	: 1,
								delay	: 500
							});
							window.machine6 = $("#machine6").slotMachine({
								active	: 2,
								delay	: 500
							});
							$("#slotMachineButtonShuffle").click(function(){
								machine4.shuffle();
								machine5.shuffle();
								machine6.shuffle();
							});
							$("#slotMachineButtonStop").click(function(){
								if( machine4.isRunning() ){
									//True to stop now
									machine4.stop(true);
								}else{
									if( machine5.isRunning() ){
										machine5.stop(true);
									}else{
										if( machine6.isRunning() ){
											machine6.stop(true);
										}
									}
								}
							});
						});
					</script>
				</div>
			</div>
			<div class="content" style="padding-left:500px; margin-top:-60px">
				<div id="slotMachineButtonShuffle" class="slotMachineButton" style="font-size: 25px">Shuffle!</div>
				<div id="slotMachineButtonStop" class="slotMachineButton" style="font-size: 25px">Stop!</div>
			</div>
		</div>
		<div class="line">
			<div class="content" style="text-align: center">
				<div style="clear:both;">
					<p class="title">Or simply use it like a slide: </p>
				</div>
				<div style="clear:both;">
					<div id="slotMachineButtonPrev" class="slotMachineButton" style="font-size: 30px; margin-left: 0px">PREV</div>
					<div id="machine7" class="slotMachine" style="margin-left:50px">
						<div class="slot slot1"></div>
						<div class="slot slot2"></div>
						<div class="slot slot3"></div>
						<div class="slot slot4"></div>
						<div class="slot slot5"></div>
						<div class="slot slot6"></div>
					</div>
					<div id="slotMachineButtonNext" class="slotMachineButton" style="font-size: 30px">NEXT</div>
					<script>
						$(document).ready(function(){
							var machine7 = $("#machine7").slotMachine({
								active	: 0,
								delay	: 500
							});
							$("#slotMachineButtonPrev").click(function(){
								machine7.prev();
							});
							$("#slotMachineButtonNext").click(function(){
								machine7.next();
							});
						});
					</script>
				</div>
			</div>
		</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 小游戲 H5游戲 游戲源碼 手機游戲 微信游戲 網頁游戲 拼圖游戲 H5拼圖游戲 拼圖游戲源碼
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子