源于前段時候微信小程序最初火爆公測時段，把以前用 Canvas 實現(xiàn)的大轉盤抽獎移植成微信小程序，無奈當時小程序對 Canvas 支持不夠完善，只好降低用 CSS3 實現(xiàn)。雖然比不上 Canvas 繪圖的絢麗，但也總算完成了一個抽獎的 Demo，詳見：http://xiazai.Vevb.com/201701/yuanma/wechat-canvas_jb51.rar
事后想起，CSS3 實現(xiàn)也并不是無有益處，比如簡單、快捷、調試方便、渲染想來也是要比 Canvas 要高效的，更重要的一點是支持媒體查詢，大轉盤也可以做成響應式的。因此抽空整理，用純 CSS3 實現(xiàn)一個大轉盤抽獎 Demo 并記錄下來。
如果有類似需求并不想麻煩了解細節(jié)，可移步這里——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; }}()); |
