jQuery九宫格抽奖

所属分类： JQ特效其他游戏

查看演示立即下载

插件描述：网页中常用的九宫格抽奖代码

更新时间：2017/2/16 下午6:56:04

更新说明：

1.代码进行了优化；

2.更新了实际项目中用到的ajax接口请求，案例中注释便于展示效果；

3.主要解决了留言用户所提出的问题；

4.手机移动端展示效果后续更新，敬请期待......

1、抽奖逻辑说明

上面只是前端展示的效果。中奖物品通过一个随机数生成。

1	`var` `index = Math.random()*(lottery.count)\|0;`

真正开发中中奖物品是通过向后端接口发送请求返回的。

$("#lottery a").click(function() {
    var islogin = checkLogin();
    if (islogin) { //已登录用户才能去抽奖
        if (click) {
            return false;
        } else {
            //向后端接口发请求返回中奖结果
            var geturl = "/" + 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结束
    }
});

2、兼容性说明

.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
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery拼音模糊查询
下一个特效： HTML5实现响应式多角度全屏滑动切换特效