首页 > 代码库 > jquery实现移动端slotmachine抽奖游戏
jquery实现移动端slotmachine抽奖游戏
项目中需要写一个抽奖的移动端的小游戏，于是就在网上找了一下插件，然后自己改动了一些样式，以下代码段仅供个人学习参考，非100%原创，有问题的地方可以提出来哦
页面效果：
以下分别为html+css+js代码：
先引用这两个文件：
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.slotmachine.js"></script>
【jquery.min.js 下载地址：http://www.jq22.com/jquery-info122
jquery.slotmachine.js 原插件下载地址：http://www.jq22.com/jquery-info433 修改后下载地址：http://pan.baidu.com/s/1nvBb8aH（链接失效，可留言）】
1 <div class="content tac"> 2 <div style="clear:both;"> 3 <div id="machine1" class="slotMachine"> 4 <div class="slot slot1"></div> 5 <div class="slot slot2"></div> 6 <div class="slot slot3"></div> 7 <div class="slot slot4"></div> 8 <div class="slot slot5"></div> 9 <div class="slot slot6"></div> 10 <div class="slot slot7"></div> 11 <div class="slot slot8"></div> 12 <div class="slot slot9"></div> 13 </div> 14 15 <div id="machine2" class="slotMachine"> 16 <div class="slot slot1"></div> 17 <div class="slot slot2"></div> 18 <div class="slot slot3"></div> 19 <div class="slot slot4"></div> 20 <div class="slot slot5"></div> 21 <div class="slot slot6"></div> 22 <div class="slot slot7"></div> 23 <div class="slot slot8"></div> 24 <div class="slot slot9"></div> 25 </div> 26 27 <div id="machine3" class="slotMachine"> 28 <div class="slot slot1"></div> 29 <div class="slot slot2"></div> 30 <div class="slot slot3"></div> 31 <div class="slot slot4"></div> 32 <div class="slot slot5"></div> 33 <div class="slot slot6"></div> 34 <div class="slot slot7"></div> 35 <div class="slot slot8"></div> 36 <div class="slot slot9"></div> 37 </div> 38 </div> 39 </div> 40 41 <div class="jf2 pr"> 42 <div id="slotMachineButton1" class="slotMachineButton">立即摇奖</div> 43 <div class="you"></div> 44 </div>
1 .slotMachineButton{ 2 width:1.05rem; 3 height: 0.23rem; 4 line-height: 0.23rem; 5 background-color: #efe491; 6 color: #ff0000; 7 font-size: 0.18rem; 8 text-align: center; 9 border: 0.04rem solid #e8d961; 10 border-radius: 0.04rem; 11 margin: 0 auto; 12 } 13 .content{ 14 padding-top: 0.08rem; 15 padding-bottom: 0.05rem; 16 } 17 .slotMachine{ 18 width:0.6rem; 19 height: 0.6rem; 20 overflow: hidden; 21 display: inline-block; 22 text-align: center; 23 border: 0.04rem solid #dedede; 24 background-color: #f2f2f2; 25 border-radius: 0.04rem; 26 } 27 .noBorder{ 28 border:none !important; 29 background: transparent !important; 30 } 31 .slotMachine .slot{ 32 width:0.6rem; 33 height:0.6rem; 34 } 35 .slot1{ 36 background-image: url("../images/apple.png"); 37 background-repeat: no-repeat; 38 background-size: 100% 100%; 39 } 40 .slot2{ 41 background-image: url("../images/cherry.png"); 42 background-repeat: no-repeat; 43 background-size: 100% 100%; 44 } 45 .slot3{ 46 background-image: url("../images/diamond_big.png"); 47 background-repeat: no-repeat; 48 background-size: 100% 100%; 49 } 50 .slot4{ 51 background-image: url("../images/grape_big.png"); 52 background-repeat: no-repeat; 53 background-size: 100% 100%; 54 } 55 .slot5{ 56 background-image: url("../images/leaf.png"); 57 background-repeat: no-repeat; 58 background-size: 100% 100%; 59 } 60 .slot6{ 61 background-image: url("../images/lemon.png"); 62 background-repeat: no-repeat; 63 background-size: 100% 100%; 64 } 65 .slot7{ 66 background-image: url("../images/money.png"); 67 background-repeat: no-repeat; 68 background-size: 100% 100%; 69 } 70 .slot8{ 71 background-image: url("../images/strawberry.png"); 72 background-repeat: no-repeat; 73 background-size: 100% 100%; 74 }.slot9{ 75 background-image: url("../images/seven_big.png"); 76 background-repeat: no-repeat; 77 background-size: 100% 100%; 78 } 79 .jf2{ 80 width: 2.7rem; 81 background-color: #c8544b; 82 margin: 0 auto; 83 border-radius: 0.05rem; 84 padding-top: 0.1rem; 85 padding-bottom: 0.1rem; 86 }
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 var machine1 = $("#machine1").slotMachine({ 4 active : 0, 5 delay : 500 6 }); 7 8 var machine2 = $("#machine2").slotMachine({ 9 active : 1, 10 delay : 500 11 }); 12 13 var machine3 = $("#machine3").slotMachine({ 14 active : 2, 15 delay : 500 16 }); 17 18 function onComplete($el, active){ 19 switch($el[0].id){ 20 case ‘machine1‘: 21 $("#machine1Result").text("Index: "+active.index); 22 break; 23 case ‘machine2‘: 24 $("#machine2Result").text("Index: "+active.index); 25 break; 26 case ‘machine3‘: 27 $("#machine3Result").text("Index: "+active.index); 28 break; 29 } 30 } 31 32 $("#slotMachineButton1").click(function(){ 33 34 machine1.shuffle(3, onComplete); 35 36 setTimeout(function(){ 37 machine2.shuffle(3, onComplete); 38 }, 500); 39 40 setTimeout(function(){ 41 machine3.shuffle(3, onComplete); 42 }, 1000); 43 44 }) 45 }); 46 </script>
jquery实现移动端slotmachine抽奖游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。