jquery实现移动端slotmachine抽奖游戏，中奖后并弹出地址填写框
项目中需要写一个抽奖的移动端的小游戏，于是就在网上找了一下插件，然后自己改动了一些样式，以下代码段仅供个人学习参考，非100%原创，有问题的地方可以提出来哦
页面效果：
以下分别为html+css+js代码：
先引用这几个文件：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>
<script type="text/javascript" src="js/jquery.slotmachine.js"></script>
<script type="text/javascript" src="js/jquery.provincesCity.js"></script>
<script type="text/javascript" src="js/provincesData.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（链接失效，可留言）】
layer.js 使用参考http://layer.layui.com/mobile/【弹出页面层】
jquery.provincesCity.js和provincesData.js使用参考http://h-ui.net/ext/1401030938.shtml【城市三级联动】
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 <style type="text/css"> 2 .edit label{ 3 display: block; 4 width: 90%; 5 height: 0.3rem; 6 line-height: 0.3rem; 7 margin-left: 5%; 8 color: #777777; 9 10 } 11 .edit input{ 12 width: 90%; 13 height: 0.3rem; 14 line-height: 0.3rem; 15 border: 0.01rem solid #e4e4e4; 16 margin-left: 5%; 17 color: #777777; 18 -webkit-appearance: none; 19 text-indent: 0.04rem; 20 font-size: 0.13rem; 21 } 22 .edit select{ 23 width: 26%; 24 height: 0.3rem; 25 line-height: 0.3rem; 26 margin-left: 5%; 27 border: 0.01rem solid #e4e4e4; 28 color: #777777; 29 -webkit-appearance: none; 30 text-indent: 0.04rem; 31 font-size: 0.13rem; 32 } 33 .mb20{ 34 margin-bottom: 0.2rem; 35 } 36 .edit textarea{ 37 width: 90%; 38 border: 0.01rem solid #e4e4e4; 39 -webkit-appearance: none; 40 text-indent: 0.04rem; 41 margin-left: 5%; 42 font-size: 0.13rem; 43 } 44 </style>
1 <script type="text/javascript"> 2 3 4 $(document).ready(function(){ 5 6 7 var machine1 = $("#machine1").slotMachine({ 8 active : 0, 9 delay : 500 10 }); 11 12 var machine2 = $("#machine2").slotMachine({ 13 active : 1, 14 delay : 500 15 }); 16 17 var machine3 = $("#machine3").slotMachine({ 18 active : 2, 19 delay : 500 20 }); 21 22 function onComplete($el, active){ 23 switch($el[0].id){ 24 case 'machine1': 25 $("#machine1Result").text("Index: "+active.index); 26 break; 27 case 'machine2': 28 $("#machine2Result").text("Index: "+active.index); 29 break; 30 case 'machine3': 31 $("#machine3Result").text("Index: "+active.index); 32 break; 33 } 34 } 35 36 $("#slotMachineButton1").click(function(){ 37 38 39 40 41 machine1.shuffle(3, onComplete); 42 43 setTimeout(function(){ 44 machine2.shuffle(3, onComplete); 45 }, 500); 46 47 setTimeout(function(){ 48 machine3.shuffle(3, onComplete); 49 }, 1000);
50 setTimeout(function(){//当确定中奖后点击OK关闭中奖提示框并弹出页面层填写地址等信息，点击保存则关闭所有弹出层及遮罩层 51 layer.open({ 52 content: '没中奖' 53 ,btn: 'OK' 54 ,shadeClose: false 55 ,yes: function(msg){ 56 layer.close(msg); 57 layer.open({ 58 type: 1 59 ,content: '<div class="edit"><label for="">收货人：</label><input type="text" /></div> <div class="edit"><label for="">联系电话：</label><input type="text" /></div><div class="edit" id="province"><label for="">所在地区：</label></div> <div class="edit mb20"><label for="">详细地址：</label><textarea name="" id="" cols="30" rows="10"></textarea></div>' 60 ,anim: 'up' 61 ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 100%; padding-top:10px; border:none;' 62 ,btn: '保存' 63 ,yes:function(index){ 64 layer.close(index); 65 }}); 66 $("#province").ProvinceCity(); 67 68 }}); 69 },3000); 70 71 72 73 74 }) 75 }); 76 </script>
