基於zepto移動4*3九宮格轉獎

時間 2019-11-24

標籤基於 zepto 移動九宮欄目無線简体版

原文原文鏈接

最近根據公司需求，要把移動端的圓形轉盤抽獎，改成九宮格的形式，查找資料搞定了，紀錄下demo代碼。javascript

頁面的展示樣式，以下css

比較簡單，就是紅色的背景圖，在這10個格子裏轉動html

具體代碼以下java

htmlweb

<!DOCTYPE html>
<html>
    <head lang="cn">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>幸運大轉盤</title>
        <link href="css/rotary4X3.css" rel="stylesheet" type="text/css">
    </head>
    <body ng-app="rotaryTable" ng-controller="rotaryTableController">
        <section>
            <div id="lottery">
                <table class="lazyimg" border="0" cellpadding="0" cellspacing="0">
                    <tr class="lottery-group">
                        <td class="lottery-unit td_1 active" >
                            <div >
                                <img id="img1" src="img/1.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_2">
                            <div>
                                <img id="img2" src="img/5.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_3">
                            <div>
                                <img id="img3" src="img/3.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_10">
                            <div>
                                <img id="img4" src="img/4.png"/>
                            </div>
                        </td>
                    </tr>
                    <tr class="lottery-group">
                        <td class="lottery-unit td_4">
                            <div>
                                <img id="img5" src="img/5.png"/>
                            </div>
                        </td>
                        <td colspan="2" class="go">
                            <a href="javascript:void(0)">
                                <img src="img/x.gif"/>
                            </a>
                        </td>
                        <td class="lottery-unit td_6">
                            <div>
                                <img id="img6" src="img/6.png"/>
                            </div>
                        </td>
                    </tr>
                    <tr class="lottery-group">
                        <td class="lottery-unit td_7">
                            <div>
                                <img id="img7" src="img/3.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_8">
                            <div>
                                <img id="img8" src="img/8.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_9">
                            <div >
                                <img id="img9" src="img/9.png"/>
                            </div>
                        </td>
                        <td class="lottery-unit td_5">
                            <div>
                                <img id="img10" src="img/10.png"/>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </section>

        <script src="js/zepto.min.js"></script>
        <script src="js/lottery.js"></script>
        <script src="js/rotary4X3.js"></script>

    </body>
</html>

css算法

html{font-size:10px;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-weight: normal; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; background:#f5f5f5;}
ol, ul { list-style:none;}
em, i{font-style: normal;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
table { border-collapse:collapse; border-spacing:0;}
* {
    tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    -ms-tap-highlight-color:rgba(0, 0, 0, 0);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
input, textarea { outline:0; resize:none; -webkit-appearance: none;}
img{vertical-align: middle;}
a{display: block; color: #333; text-decoration: none;}




#lottery{height:225px;width:300px;padding:14px 18px;margin: 50px auto;background: url(../img/sudoku_bg.png) no-repeat;background-size: 100%;}
#lottery table td{width:66px;height:66px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:66px;height:66px;line-height:63px;display:block;text-decoration:none;}
#lottery table td img{width: 100%}

/*給蘋果6和6P作下簡單的適配*/
@media (min-width: 350px) {
    #lottery{height:270px;width:360px;padding:17px 22px;}
    #lottery table td{width:79px;height:79px;}
    #lottery table td a{width:79px;height:79px;line-height:76px;}
}
#lottery table td.active{background:url(../img/sudoku_active.png) no-repeat;}

lottery.jschrome

var defaults = {
    selector: '#lottery',
    width: 3,    // 轉盤寬度
    height: 4,    // 轉盤高度
    initSpeed: 300,    // 初始轉動速度
    speed: 0,    // 當前轉動速度
    upStep: 50,   // 加速滾動步長
    upMax: 50,   // 速度上限
    downStep: 30,   // 減速滾動步長
    downMax: 500,  // 減速上限
    waiting: 3000, // 勻速轉動時長
    index: 0,    // 初始位置
    target: 1,    // 中獎位置，可經過後臺算法來得到，默認值：最便宜的一個獎項或者"謝謝參與"
    isRunning: false, // 當前是否正在抽獎
    msg:""   //轉獎結束時提示語
};

var lottery = {
    // 初始化用戶配置
    lottery: function (options) {
        this.options = $.extend(true, defaults, options);
        this.options.speed = this.options.initSpeed;
        this.container = $(this.options.selector);
        this._setup();
    },

    // 開始裝配轉盤
    _setup: function () {
        // 這裏爲每個獎項設置一個有序的下標，方便lottery._roll的處理
        // 初始化第一行lottery-group的序列
        var groups = this.container.find(".lottery-group"),
            groupFirst = groups.eq(0);
        for (var i = 0; i < this.options.width; ++i) {
            groupFirst.find(".lottery-unit").eq(i).attr('lottery-unit-index', i);
        }
        // 初始化最後一行lottery-group的序列
        var groupLast = groups.eq(groups.length - 1);
        for (var i = lottery._count() - this.options.height + 1, j = 0, len = this.options.width + this.options.height - 2; i >= len; --i, ++j) {
            groupLast.find(".lottery-unit").eq(j).attr('lottery-unit-index', i);
        }
        // 初始化兩側lottery-group的序列
        for (var i = 1, len = this.options.height - 2; i <= len; ++i) {
            var lotteryUnits = groups.eq(i).find(".lottery-unit"),
                lotteryUnitsFirst = lotteryUnits.eq(0),
                lotteryUnitsLast = lotteryUnits.eq(lotteryUnits.length - 1);
            lotteryUnitsFirst.attr('lottery-unit-index', lottery._count() - i);
            lotteryUnitsLast.attr('lottery-unit-index', this.options.width + i - 1);
        }
        this._enable();
    },

    // 開啓抽獎
    _enable: function () {
        this.container.find('.go').bind('click', this.beforeRoll);
    },

    // 禁用抽獎
    _disable: function () {
        this.container.find('.go').unbind('click', this.beforeRoll);
    },

    // 轉盤加速
    _up: function () {
        var _this = this;
        if (_this.options.speed <= _this.options.upMax) {
            _this._constant();
        } else {
            _this.options.speed -= _this.options.upStep;
            _this.upTimer = setTimeout(function () {
                _this._up();
            }, _this.options.speed);
        }
    },

    // 轉盤勻速
    _constant: function () {
        var _this = this;
        clearTimeout(_this.upTimer);
        setTimeout(function () {
            _this.beforeDown();
        }, _this.options.waiting);
    },

    // 減速以前的操做，支持用戶追加操做（例如：從後臺獲取中獎號）
    beforeDown: function () {
        var _this = this;
        _this.aim();
        if (_this.options.beforeDown) {
            _this.options.beforeDown.call(_this);
        }
        _this._down();
    },

    // 轉盤減速
    _down: function () {
        var _this = this;
        if (_this.options.speed > _this.options.downMax && _this.options.target == _this._index()) {
            _this._stop();
        } else {
            _this.options.speed += _this.options.downStep;
            _this.downTimer = setTimeout(function () {
                _this._down();
            }, _this.options.speed);
        }
    },

    // 轉盤中止，還原設置
    _stop: function () {
            console.log(this);
        var _this = this;
        clearTimeout(_this.downTimer);
        clearTimeout(_this.rollerTimer);
        _this.options.speed = _this.options.initSpeed;
        _this.options.isRunning = false;
        _this._enable();
        var msg = lottery.options.msg;
        if (msg && msg != "") {
            alert(msg)
        }
    },

    // 抽獎以前的操做，支持用戶追加操做
    beforeRoll: function () {
        var _this = lottery,
            beforeCheck = _this.options.beforeRoll;
        if(beforeCheck && typeof beforeCheck == "function"){
            beforeCheck(function(){
                _this._disable();
                _this._roll();
            });
        }
    },

    // 轉盤滾動
    _roll: function () {
        var _this = this;
        _this.container.find(".lottery-unit").removeClass("active");
        ++_this.options.index;
        _this.container.find(".lottery-unit").each(function () {
            var unitIndex = $(this).attr("lottery-unit-index");
            if(Number(unitIndex) == Number(_this._index())){
                $(this).addClass("active");
            }
        });
        _this.rollerTimer = setTimeout(function () {
            _this._roll();
        }, _this.options.speed);
        if (!_this.options.isRunning) {
            _this._up();
            _this.options.isRunning = true;
        }
    },

    // 轉盤當前格子下標
    _index: function () {
        return this.options.index % this._count();
    },

    // 轉盤總格子數
    _count: function () {
        return this.options.width * this.options.height - (this.options.width - 2) * (this.options.height - 2);
    },

    // 獲取中獎號，用戶可重寫該事件，默認隨機數字
    aim: function () {
        var _this = this,
            rollAim = _this.options.aim;
        if(rollAim && typeof rollAim == "function"){
            rollAim(function(to,msg){
                _this.options.target = Number(to);
                _this.options.msg = msg;
            });
        }
    }
};

rotary4X3.jscanvas

$(function(){
    lottery.lottery({
        selector: '#lottery',
        width: 4,
        height: 3,
        index: 0, // 初始位置
        initSpeed: 500, // 初始轉動速度
        beforeRoll: function(callback) { //轉動前進行校驗
            //模擬轉動前作的一些校驗
            setTimeout(function(){
                /*
                 * 當出現某某問題，在此處能夠給出提示，直接return
                 * .....
                 * */
                if (callback && typeof callback == "function") {
                    callback();
                }
            },500);
        },
        aim: function(callback) { //轉動中肯定終點
            //模擬快結束時，獲取終點，和彈出信息
            setTimeout(function(){
                if (callback && typeof callback == "function") {
                    //默認到第4個方塊，提示信息爲「恭喜恭喜」
                    callback(3,"恭喜恭喜");
                }
            },1000);
        }
    });
})

源碼的下載地址爲ruby

http://download.csdn.net/detail/hufengsky123/9263411app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。