源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 Demo，详见：http://xiazai.Vevb.com/201701/yuanma/wechat-canvas_jb51.rar
事后想起，CSS3 实现也并不是无有益处，比如简单、快捷、调试方便、渲染想来也是要比 Canvas 要高效的，更重要的一点是支持媒体查询，大转盘也可以做成响应式的。因此抽空整理，用纯 CSS3 实现一个大转盘抽奖 Demo 并记录下来。
如果有类似需求并不想麻烦了解细节，可移步这里——Canvas 完整的大转盘抽奖项目（可以直接拿来用）http://xiazai.Vevb.com/201701/yuanma/canvas_jb51.rar
以下就直接贴代码了。
代码
HTML
| <section class="gb-wheel-container" id="gbWheel"> <div class="gb-wheel-content gb-wheel-run"> <ul class="gb-wheel-line"></ul> <div class="gb-wheel-list"></div> </div> <a href="javascript:;" class="gb-wheel-btn" id="gbLottery">抽奖</a> </section> |
JS
| (function() { // 奖品配置 var awards = [ {'index': 0, 'text': '耳机' , 'name': 'icono-headphone'}, {'index': 1, 'text': 'iPhone' , 'name': 'icono-iphone'}, {'index': 2, 'text': '相机' , 'name': 'icono-camera'}, {'index': 3, 'text': '咖啡杯' , 'name': 'icono-cup'}, {'index': 4, 'text': '日历', 'name': 'icono-calendar'}, {'index': 5, 'text': '键盘', 'name': 'icono-keyboard'} ], len = awards.length, turnNum = 1 / len; // 文字旋转 turn 值 var gbWheel = $('gbWheel'), lineList = gbWheel.querySelector('ul.gb-wheel-line'), itemList = gbWheel.querySelector('.gb-wheel-list'), lineListHtml = [], itemListHtml = []; var transform = preTransform(); awards.forEach(function(v, i, a) { // 分隔线 lineListHtml.push('<li class="gb-wheel-litem" style="' + transform + ': rotate('+ (i * turnNum + turnNum / 2) +'turn)"></li>'); // 奖项 itemListHtml.push('<div class="gb-wheel-item">'); itemListHtml.push('<div class="gb-wheel-icontent" style="' + transform + ': rotate('+ (i * turnNum) +'turn)">'); itemListHtml.push('<p class="gb-wheel-iicon">'); itemListHtml.push('<i class="'+v.name+'"></i>'); itemListHtml.push('</p>'); itemListHtml.push('<p class="gb-wheel-itext">'); itemListHtml.push(v.text); itemListHtml.push('</p>'); itemListHtml.push('</div>'); itemListHtml.push('</div>'); }); lineList.innerHTML = lineListHtml.join(''); itemList.innerHTML = itemListHtml.join(''); function $(id) { return document.getElementById(id); }; // 旋转 var i = 0; $('gbLottery').onclick = function() { i++; gbWheel.querySelector('.gb-wheel-content').style = transform + ': rotate('+ i * 3600 +'deg)'; } // transform兼容 function preTransform() { var cssPrefix, vendors = { '': '', Webkit: 'webkit', Moz: '', O: 'o', ms: 'ms' }, testEle = document.createElement('p'), cssSupport = {}; // 嗅探特性 Object.keys(vendors).some(function(vendor) { if (testEle.style[vendor + (vendor ? 'T' : 't') + 'ransform'] !== undefined) { cssPrefix = vendor ? '-' + vendor.toLowerCase() + '-' : ''; return true; } }); function normalizeCss(name) { name = name.toLowerCase(); return cssPrefix ? cssPrefix + name : name; } cssSupport = { transform: normalizeCss('Transform'), } return cssSupport.transform; }}()); |
