一、用到的图片

二、代码如下，重点是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"> ...

随机推荐

Spring4学习笔记2-配置集合属性
1 可使用<list> <map> <set>等来配置集合属性 2 List  <bean id="p ...
Linux文件查看/编辑方法介绍
转载:https://www.centos.bz/2011/10/linux-file-view-edit/ cat 命令介绍 cat 命令的原含义为连接(concatenate), 用于连接多个文件 ...
javascript --- 原型初探七日谈（三）
原型陷阱: 在处理原型问题上时,我们要注意两种行为. 1. 当我们对原型对象执行完全替换的时候,有可能会触发原型链的某种异常. 2. prototype.constructor 属性是不可靠的. 下面 ...
getDate()返回日期不一致问题引发的bug
问题描述最近在webapp的开发中遇到一个Date对象中getDate获取日期的兼容性问题,Date对象的getDate方法返回的日期和传入的日期不一致,例如: 在android 4.3以下版本,g ...
Swift获取屏幕快照
// 获取屏幕快照 private func screenShot() -> UIImage{ let window = UIApplication.shared.keyWindow! UIGr ...
iOS 7 与 Xamarin － MultiPeer Connectivity（转载）
随着时代的改变,移动设备在生活工作都开始取代原有的pc.设备间的数据交互就成为了必备可少的功能.比较成熟的产品有NFC.这个啪啪的操作很流行,例如分享图片,分享文件等 .但是在iOS设备中还没有NFC ...
我的第一节Android课
我的第一节安卓课程,今天非比寻常的一天,我开始了我程序猿之路的第一节安卓课程,安卓课程只是我的一个兴趣班,我的本专业是java开发,因为喜欢做一个属于自己的一个手机APP,就选多个一样技能,毕竟十八般 ...
Android 6.0 运行时权限处理
在运行时请求权限从Android 6.0(API级别23)开始,用户权限授予应用程序在应用程序运行时,当他们安装程序.这种方法简化了应用程序的安装过程,因为用户不需要安装或更新应用程序时授予权限.这 ...
安卓开发NDK环境搭建
第一步preferences - android - NDK 第二步输入ndk文件所在目录第三步创建文件名(右击项目,阿 androidtool - add native sppuort)
web service上传参数代码实例
web service上传参数代码实例这次做的项目用到webservice比较多,最开始在网上看的参考dome,发现都不行,后来发现安卓4.0以后有很大的不同,在做传参时,有些东西需要注意: 第一, ...

jquery——九宫格大转盘抽奖