抽奖效果有很多种，常见的有转盘、九宫格、随机码等等，本站之前做过几个转盘抽奖的例子（百度、机锋、QQ音乐），今天来做一个九宫格的效果。
九宫格转盘抽奖完整源码下载：https://uomg.lanzous.com/iLRKVddtuje
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>九宫格转盘抽奖演示_dowebok</title> <style> * { margin: 0; padding: 0; } table { border-spacing: 0; border-collapse: collapse; text-align: center; } .draw { width: 460px; height: 470px; margin: 0 auto; padding: 40px; background-image: url(images/bg.png);} .draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); } .draw .item.active { background-image: url(images/bg2.png); } .draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; } .draw .img img { vertical-align: top; } .draw .gap { width: 5px; } .draw .gap-2 { height: 5px; } .draw .name { display: block; margin-top: 10px; font-size: 14px; } .draw .draw-btn { display: block; height: 150px; line-height: 150px; border-radius: 20px; font-size: 25px; font-weight: 700; color: #f0ff00; background-color: #fe4135; text-decoration: none; } .draw .draw-btn:hover { background-color: #fe8d85; } </style> </head> <body> <h1>九宫格转盘抽奖演示</h1> <div class="draw" id="lottery"> <table> <tr> <td class="item lottery-unit lottery-unit-0"> <div class="img"> <img src="images/img1.png" alt=""> </div> <span class="name">虚拟主机 1元/年</span> </td> <td class="gap"></td> <td class="item lottery-unit lottery-unit-1"> <div class="img"> <img src="images/img2.png" alt=""> </div> <span class="name">VPS 1元/30天</span> </td> <td class="gap"></td> <td class="item lottery-unit lottery-unit-2"> <div class="img"> <img src="images/img3.png" alt=""> </div> <span class="name">.top域名 1元/年</span> </td> </tr> <tr> <td class="gap-2" colspan="5"></td> </tr> <tr> <td class="item lottery-unit lottery-unit-7"> <div class="img"> <img src="images/img4.png" alt=""> </div> <span class="name">免费主机1年</span> </td> <td class="gap"></td> <td class=""><a class="draw-btn" href="javascript:">立即抽奖</a></td> <td class="gap"></td> <td class="item lottery-unit lottery-unit-3"> <div class="img"> <img src="images/img5.png" alt=""> </div> <span class="name">.com域名 19元/年</span> </td> </tr> <tr> <td class="gap-2" colspan="5"></td> </tr> <tr> <td class="item lottery-unit lottery-unit-6"> <div class="img"> <img src="images/img7.png" alt=""> </div> <span class="name">.com域名 19元/年</span> </td> <td class="gap"></td> <td class="item lottery-unit lottery-unit-5"> <div class="img"> <img src="images/img6.png" alt=""> </div> <span class="name">CDN加速 10元/15天</span> </td> <td class="gap"></td> <td class="item lottery-unit lottery-unit-4"> <div class="img"> <img src="images/img8.png" alt=""> </div> <span class="name">20元快云币</span> </td> </tr> </table> </div> <script src="js/jquery.min.js"></script> <script> var lottery = { index: -1, //当前转动到哪个位置，起点位置 count: 0, //总共有多少个位置 timer: 0, //setTimeout的ID，用clearTimeout清除 speed: 20, //初始转动速度 times: 0, //转动次数 cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节 prize: -1, //中奖位置 init: function(id) { if ($('#' + id).find('.lottery-unit').length > 0) { $lottery = $('#' + id); $units = $lottery.find('.lottery-unit'); this.obj = $lottery; this.count = $units.length; $lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active'); }; }, roll: function() { var index = this.index; var count = this.count; var lottery = this.obj; $(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active'); index += 1; if (index > count - 1) { index = 0; }; $(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active'); this.index = index; return false; }, stop: function(index) { this.prize = index; return false; } }; function roll() { lottery.times += 1; lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化 if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) { clearTimeout(lottery.timer); lottery.prize = -1; lottery.times = 0; click = false; } else { if (lottery.times < lottery.cycle) { lottery.speed -= 10; } else if (lottery.times == lottery.cycle) { var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生 lottery.prize = index; } else { if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) { lottery.speed += 110; } else { lottery.speed += 20; } } if (lottery.speed < 40) { lottery.speed = 40; }; lottery.timer = setTimeout(roll, lottery.speed); //循环调用 } return false; } var click = false; window.onload = function(){ lottery.init('lottery'); $('.draw-btn').click(function() { if (click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应 return false; } else { lottery.speed = 100; roll(); //转圈过程不响应click事件，会将click置为false click = true; //一次抽奖完成后，设置click为true，可继续抽奖 return false; } }); }; </script> </body> </html> |
转载请保留本文链接：https://www.zhe94.com/767.html
添加站长微信
