jQuery模擬老虎機抽獎九宮格隨機抽獎特效代碼

這只是前端展示的效果。中獎物品通過一個隨機數生成。
var index = Math.random()*(lottery.count)|0;
真正開發中中獎物品是通過向后端接口發送請求返回的。
$("#lottery a").click(function() {    var islogin = checkLogin();    if (islogin) { //已登錄用戶才能去抽獎        if (click) {            return false;        } else {            //向后端接口發請求返回中獎結果            var geturl = "http://xxxxxx?username=" + username + "&token=" + token;            $.ajax({　url: geturl,                type: "GET",                dataType: "json",                async: false,                success: function(data) {                    if (data.errorcode == 0) {                        var rewardid = data["message"]["rewardid"];                        var cardno = data["message"]["rewardCardNo"];                        var passno = data["message"]["rewardCardPass"];                        var prize = -1;                        var content = "";                        if (rewardid == "iphone6") {                            lottery.prize = 0;                            prize = 0;                            content = "一部iphone6手機";                            $("#content1").html(content);                        } else if (rewardid == "PPTVKING") {                            lottery.prize = 1;                            prize = 1;                            content = "一部PPTV KING7s  3D影音手機";                            $("#content1").html(content);                            //...                            } else if (rewardid == "legao") {                            lottery.prize = 5;                            prize = 5;                            content = "一份樂高的玩具";                            $("#content1").html(content);                        }                        lottery.speed = 100;                        roll();                        click = true;                        return false;                    } else {                        //錯誤處理                        if (data.errorcode == 3) {                            $("#novip").show();                        } else {                            $("#notime").show();                        }                    }                }                //function結束            });            //ajax結束        }        //lse結束    }});
兼容性說明.mask開始如下，用的是rgba，但是IE8不兼容，改為使用png圖片background:url(images/mask.png) no-repeat;(ps:mask.png可自己根據產品設計稿切圖)
.mask {    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0;    background-color: rgba(252,211,4,0.5);    display: none}