基於jQuery的 h5移動端抽獎頁面插件

時間 2019-11-29

標籤基於 jquery h5 移動抽獎頁面插件欄目 JQuery 简体版

原文原文鏈接

基於jQuery的 H5移動端頁面抽獎插件css

12宮格抽獎頁面html

採用rem佈局，親測安卓機有效，用的是375px設計稿jquery

同時能夠學習下jQuery插件的基本模板是怎麼寫的。git

案例下載地址：https://github.com/Summer-Lin/luck-drawgithub

直接上動態圖：dom

項目結構：ide

直接複製粘貼代碼，更換圖片便可函數

HTML代碼:oop

<!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();
          }//停留在獎項後的回調函數，完成後能夠操做本身想要的內容，好比彈出框
        })
    })