一、用到的图片

二、代码如下，重点是js部分

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery九宫格大转盘抽奖</title>

<style>

#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}

#lottery table{background-color:yellow;}

#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}

#lottery table td img{display:block;width:190px;height:170px;}

#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(images/lottery1.jpg) no-repeat top center;}

#lottery table td a:hover{background-image:url(images/lottery2.jpg);}

#lottery table td.active .mask{display:block;}

.mask{

    width:100%;

    height:100%;

    position:absolute;

    left:0;

    top:0;

    background:url(images/mask.png) no-repeat;

    display:none;

}

</style>

</head>

<body class="keBody">

<!--效果html开始-->

<div id="lottery">

    <table border="0" cellpadding="0" cellspacing="0">

        <tr>

            <td class="lottery-unit lottery-unit-0"><img src="data:images/gift0.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-1"><img src="data:images/gift1.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-2"><img src="data:images/gift2.jpg"><div class="mask"></div></td>

        </tr>

        <tr>

            <td class="lottery-unit lottery-unit-7"><img src="data:images/gift7.jpg"><div class="mask"></div></td>

            <td><a href="#"></a></td>

            <td class="lottery-unit lottery-unit-3"><img src="data:images/gift3.jpg"><div class="mask"></div></td>

        </tr>

        <tr>

            <td class="lottery-unit lottery-unit-6"><img src="data:images/gift6.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-5"><img src="data:images/gift5.jpg"><div class="mask"></div></td>

            <td class="lottery-unit lottery-unit-4"><img src="data:images/gift4.jpg"><div class="mask"></div></td>

        </tr>

    </table>

</div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

var lottery={

    index:-1,    //当前转动到哪个位置，起点位置

    count:0,    //总共有多少个位置

    timer:0,    //setTimeout的ID，用clearTimeout清除

    speed:20,    //初始转动速度

    times:0,    //转动次数

    cycle:50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节

    prize:-1,    //中奖位置

    init:function(id){

        if ($("#"+id).find(".lottery-unit").length>0) {

            $lottery = $("#"+id);

            $units = $lottery.find(".lottery-unit");

            this.obj = $lottery;

            this.count = $units.length;

            $lottery.find(".lottery-unit-"+this.index).addClass("active");

        };

    },

    roll:function(){

        var index = this.index;

        var count = this.count;

        var lottery = this.obj;

        $(lottery).find(".lottery-unit-"+index).removeClass("active");

        index += 1;

        if (index>count-1) {

            index = 0;

        };

        $(lottery).find(".lottery-unit-"+index).addClass("active");

        this.index=index;

        return false;

    },

    stop:function(index){

        this.prize=index;

        return false;

    }

};

function roll(){

    lottery.times += 1;

    lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化

    if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {

        clearTimeout(lottery.timer);

        lottery.prize=-1;

        lottery.times=0;

        click=false;

    }else{

        if (lottery.times<lottery.cycle) {

            lottery.speed -= 10;

        }else if(lottery.times==lottery.cycle) {

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

            lottery.prize = index;

        }else{

            if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {

                lottery.speed += 110;

            }else{

                lottery.speed += 20;

            }

        }

        if (lottery.speed<40) {

            lottery.speed=40;

        };

        //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);

        lottery.timer = setTimeout(roll,lottery.speed);//循环调用

    }

    return false;

}

var click=false;

window.onload=function(){

    lottery.init('lottery');

    $("#lottery a").click(function(){

        if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应

            return false;

        }else{

            lottery.speed=100;

            roll();    //转圈过程不响应click事件，会将click置为false

            click=true; //一次抽奖完成后，设置click为true，可继续抽奖

            return false;

        }

    });

};

</script>

<!--效果html结束-->

</body>

</html>

效果如下：

三、注意事项

1、抽奖过程说明

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

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结束*/

            }/*else结束*/

           }

});

2、兼容性说明

.mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片background:url(images/mask.png) no-repeat;

.mask {

    width: 100%;

    height: 100%;

    position: absolute;

    left:;

    top:;

    background-color: rgba(252,211,4,0.5);

    display: none

}

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4933907.html有问题欢迎与我讨论，共同进步。

jquery——九宫格大转盘抽奖的更多相关文章

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现在线实例查看演示完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
C#保留2位小数几种场景总结游标遍历所有数据库循环执行修改数据库的sql命令原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结
大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...
纯CSS3大转盘抽奖（响应式、可配置）
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
PHP实现大转盘抽奖算法实例
本文主要向大家介绍了PHP语言实现大转盘抽奖算法,通过具体的实例向大家展示,希望对大家学习PHP抽奖有所帮助. 流程:1.拼装奖项数组,2.计算概率,3.返回中奖情况代码如下:中奖概率 ' v ' ...
PHP+AJAX开发幸运大转盘抽奖
PHP+AJAX开发幸运大转盘抽奖,通过奖品库存.中奖次数来计算中奖概率奖品设置 $prizes = array( 0 => array( "id" => 0, // ...
Java 实现大转盘抽奖
需要用到 JAVA中的Random()函数注意:大转盘抽奖各奖项中奖概率之和为 1.奖品列表中的概率为累加概率,需要按照添加进列表的顺序进行累加,添加顺序不做要求. 实际中使用需要考虑奖品数量限制等 ...
jQuery幸运大转盘_jQuery+PHP抽奖程序
http://www.thinkphp.cn/code/1153.html 网上转盘抽奖程序大多是flash完成的,而本文使用jQuery和PHP来实现转盘抽奖程序. 若是想看更多js特效.网站源码. ...
php 大转盘抽奖
包在文件中 lottery.zip <!DOCTYPE HTML><html><head><meta charset="utf-8"> ...

随机推荐

json 对象数组
一.json写法以及获得其数据的方法 var jsons={ name:'wen', age:12, price:'qq' } console.log(typeof jsons);//object c ...
SQL Server数据类型转换
在SQL Server日常的函数.存储过程和SQL语句中,经常会用到不同数据类型的转换.在SQL Server有两种数据转换类型:一种是显性数据转换:另一种是隐性数据转换.下面分别对这两种数据类型转换 ...
C# yield
C#中的yield可以应用在一个可迭代的方法中,我们必须真正理解此关键词,才能将它正确的应用到实际生产中.为了说明yield会出现让我们迷惑的结果,下面先定义一个MyObject类: class My ...
基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
array's filter
var arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, { }, { id: null }, { id: NaN ...
原创：phoenix4.6.0连接hbase1.1.2(不使用phoenix-4.6.0-HBase-1.1-client.jar）
官网上面的例子是在phoenix-4.6.0-HBase-1.1-client.jar完成的,这个jar包含了phoenix4.6连接hbase1.1.2所有的依赖,真是包罗万象(里面竟然还包括了se ...
请各位帮帮忙：Android LBS应用——CityExplorer (v1.0) 调研
Hello哇各位亲!! 请各位帮帮忙:Android LBS应用——CityExplorer(V1.0)调研嗯,这个事情是这样的,要填一个调查问卷,但是问卷中部分问题是关于这个叫做CityExplo ...
Ubuntu 16.04 LTS 安装配置 Nginx 1.10.0 Php7.0-FPM
1. 安装Nginx,Php-7.0 ~$ sudo add-apt-repository ppa:nginx/stable ~$ sudo apt-get update ~$ sudo apt-ge ...
System.Web.HttpException: 无法序列化会话状态。在“StateServer”或“SQLServer”模式下，ASP.NET 将序列化会话状态对象，因此不允许使用无法序列化的对象或 MarshalByRef 对象。如果自定义会话状态存储在“Custom”模式下执行了类似的序列化，则适用同样的限制。 ---> System.Runtime.Serialization.Seria
序列化问题:查询度娘各种答案不一多为修改web.config找到SessionState节,将Mode 设置为 InProc ,还有舍弃Session用cookie存储,多经试验觉得还是写一个 ...
c中的指针
一. 指针前奏 1. 指针的重要性指针是C语言中非常重要的数据类型,如果你说C语言中除了指针,其他你都学得很好,那你干脆说没学过C语言. 2. 小需求 l void change(int n)函数 ...

jquery——九宫格大转盘抽奖