基於jQuery的 h5移動端抽獎頁面插件
阿新 • • 發佈：2017-10-24
舉例 背景 active fun device none this 模板 循環
基於jQuery的 H5移動端頁面抽獎插件
12宮格抽獎頁面
采用rem布局，親測安卓機有效，用的是375px設計稿
同時可以學習下jQuery插件的基本模板是怎麽寫的。
案例下載地址：github上不了，晚點補充
直接上動態圖：
項目結構：
直接復制粘貼代碼，更換圖片即可
HTML代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 375) + ‘px‘; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window); </script> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="lotto" id="lotto"> <table> <tr> <td class="awards award-0"> <img src="images/4.png"> </td> <td class="awards award-1"> <img src="images/5.png"> </td> <td class="awards award-2"> <img src="images/6.png"> </td> <td class="awards award-3"> <img src="images/12.png"> </td> </tr> <tr> <td class="awards award-11"> <img src="images/5.png"> </td> <!--中獎按鈕--> <td class="awards" colspan="2" rowspan="2" id="lottoBtn"> <img src="images/20.png"> </td> <td class="awards award-4"> <img src="images/12.png"> </td> </tr> <tr> <td class="awards award-10"> <img src="images/4.png"> </td> <td class="awards award-5"> <img src="images/5.png"> </td> </tr> <tr> <td class="awards award-9"> <img src="images/4.png"> </td> <td class="awards award-8"> <img src="images/5.png"> </td> <td class="awards award-7"> <img src="images/6.png"> </td> <td class="awards award-6"> <img src="images/12.png"> </td> </tr> </table> <div class="pop-up" id="popUp"> <img src="images/15.png" alt=""> </div> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/luckyDraw.js"></script> <script> $(function () { $(‘#lottoBtn‘).on(‘click‘, function () { // 調用插件 $(‘#lotto‘).luckyDraw( { prize:5,//獎項從0-11，要選擇要停留的位置，默認為0-11的隨機數 // speed:15,翻轉速度，默認15，數值越大越慢，因為采用的是setTimeout callback: function () { // 舉例：中獎後彈出一個框出來 $(‘#popUp‘).show(); }//停留在獎項後的回調函數，完成後可以操作自己想要的內容，比如彈出框 }) }) $(‘#popUp‘).on(‘click‘,function () { $(this).hide(); }) }) </script> </body> </html>
CSS代碼：
* { margin: 0; padding: 0; font-size: 0; box-sizing: border-box; } html, body { min-width: 100%; min-height: 100%; height: 100%; } .lotto { margin: 0 auto; min-height: 100%; } .lotto table { width: 3.09rem; height: 3.05rem; margin: 0.5rem auto; background-color: #ffcb20; } .lotto tr { width: 100%; height: 0.72rem; } .lotto td { width: 0.73rem; height: 0.72rem; } #lottoBtn { height: 1.47rem; } .lotto img { width: 100%; height: 100%; } table .active { background: url(‘../images/active.png‘) no-repeat; background-size: 105% 100%; } .pop-up { display: none; position: absolute; top: 0.5rem; left: 50%; transform: translate(-50%, 0); } .pop-up img { width: 2.43rem; height: 2.43rem; }
luckyDraw.js插件代碼：
1 +function ($) { 2 $.fn.luckyDraw = function (options) { 3 if (this.length == 0) return this; 4 if (this.length > 1) { 5 this.each(function () { 6 $(this).luckyDraw(options); 7 }) 8 return this; 9 } 10 initLotto(this, options); 11 }; 12 13 function initLotto(item, options) { 14 var defaults = { 15 index: 0,//開始索引 16 speed: 15,//旋轉速度 17 count: 11,//總共有12個獎品,從0開始數起 18 timer: 0,//計數器 19 loop:3,//循環旋轉次數 20 prize: Math.floor(Math.random() * (11 + 1)),//中獎位置 21 times:0, 22 callback:function () {} 23 }; 24 var opts = $.extend({}, defaults, options); 25 26 27 var _self = $(item); 28 29 var lotto = { 30 init: function () { 31 var $awards = _self.find(‘.awards‘); 32 var awardsLength = $awards.length; 33 if (awardsLength > 0) { 34 // 清除掉之前的背景 35 _self.find(‘.awards‘).removeClass(‘active‘); 36 _self.find(‘.award-‘ + opts.index).addClass(‘active‘); 37 } 38 }, 39 changeActive: function () { 40 _self.find(‘.award-‘ + opts.index).removeClass(‘active‘); 41 opts.index++; 42 if (opts.index > opts.count) { 43 opts.index = 0; 44 } 45 _self.find(‘.award-‘ + opts.index).addClass(‘active‘); 46 }, 47 loop:function () { 48 opts.times ++; 49 var _length = opts.loop * opts.count; 50 if(opts.times > _length && opts.prize == opts.index ) { 51 clearTimeout(opts.timer); 52 opts.callback && opts.callback(); 53 return; 54 } 55 lotto.changeActive(); 56 if((opts.times + 20) > _length) { 57 opts.speed +=10; 58 } 59 if((opts.times + 10) > _length) { 60 opts.speed +=20; 61 } 62 if(opts.times > _length && Math.abs(opts.index-opts.prize ) <5){ 63 opts.speed +=100; 64 } 65 opts.timer = setTimeout(lotto.loop, opts.speed); 66 return; 67 } 68 } 69 // 初始化 70 lotto.init(); 71 // 循環 72 lotto.loop(); 73 } 74 }(jQuery);
插件調用方法：
$(‘#lottoBtn‘).on(‘click‘, function () { // 調用插件 $(‘#lotto‘).luckyDraw( { prize:5,//獎項從0-11，要選擇要停留的位置，默認為0-11的隨機數 // speed:15,翻轉速度，默認15，數值越大越慢，因為采用的是setTimeout callback: function () { // 舉例：中獎後彈出一個框出來 $(‘#popUp‘).show(); }//停留在獎項後的回調函數，完成後可以操作自己想要的內容，比如彈出框 }) })
基於jQuery的 h5移動端抽獎頁面插件