项目中需要写一个抽奖的移动端的小游戏，于是就在网上找了一下插件，然后自己改动了一些样式，以下代码段仅供个人学习参考，非100%原创，有问题的地方可以提出来哦
页面效果：
以下分别为html+css+js代码：
先引用这两个文件：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="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>
时间： 2024-09-29 08:57:06