一、用到的图片

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

随机推荐

JQuery（选择器、事件、DOM操作）
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
jquery.sobox 经典版弹窗控件
sobox 是一款非常实用的,基于 jQuery 的弹窗控件.功能非常完整,而代码量又非常少(压缩完仅8k不到)的一款弹窗控件,如果你熟悉ext的弹窗控件,那么sobox的使用对你来说应该是愉悦而完全 ...
2014年3月新鲜出炉的最佳 JavaScript 工具库
一个 JavaScript 库是预先编写的 JavaScript 程序,用于简化 Web 应用程序开发,特别是对 Ajax 和其它 Web 为中心的技术.JavaScript 提供了多种方法,通过它来 ...
变量作用域&函数作用域
一. 变量作用域 1)全局变量在全局环境下声明的变量被视为全局变量. 在没有使用var进行声明的时候,变量就被定义为全局变量.在ES5的严格模式下,如果变量没有使用var来声明是会报错的. 2)局部 ...
Web数据持久化存储IndexedDB（不常用）
IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...
转：jquery选择器总结
原文地址:http://www.cnblogs.com/onlys/articles/jQuery.html jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $(&qu ...
操作系统开发系列—12.c.从Loader加载ELF内核，顺便解释下函数调用过程 ●
实际上,我们要做的工作是根据内核的Program header table的信息进行类似下面这个C语言语句的内存复制: memcpy(p_vaddr, BaseOfLoaderPhyAddr+p_of ...
Android studio 修改包名和版本号
Android项目实战（二十三）：仿QQ设置App全局字体大小
一.项目需求: 因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能. 这里仿做QQ设置字体大小的功能. QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻 ...
hybrid app
hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...

jquery——九宫格大转盘抽奖