一、用到的图片

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

随机推荐

vim自动补全插件YouCompleteMe
前言 Valloric/YouCompleteMe可以说是vim安装最复杂的插件之一,但是一旦装好,却又是非常好用的.YouCompleteMe简称ycm 在安装折腾的过程中,我再一次的体会到,除了官 ...
Hyhyhy – 专业的 HTML5 演示文稿工具
Hyhyhy 是创建好看的 HTML5 演示文档的工具.它具备很多的特点:支持 Markdown,嵌套幻灯片,数学排版,兼容性,语法高亮,使用 Javascript API ,方便的骨架.它支持 Fi ...
Draggabilly – 轻松实现拖放功能（Drag & Drop）
Draggabilly 是一个很小的 JavaScript 库,专注于拖放功能.只需要简单的设置参数就可以在你的网站用添加拖放功能.兼容 IE8+ 浏览器,支持多点触摸.可以灵活绑定事件,支持 Req ...
HTML5 video 和 audio
video 用于在HTML或者XHTML文档中嵌入视频内容使用 video 元素至少要提供两种视频格式的文件:OGG 和 MP4 OGG:采用 Theora 视频格式和 Vorbis 音频解码器 ( ...
jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...
如何使用代码或脚本启用SharePoint的备用语言
SP的多语言,需要安装语言包,然后手工去sharepoint下启动备用语言,如下图: [网站操作]-[语言设置]: 方法一:采用powershell处理在很多项目情况下,需要用代码进行备用语言启动. ...
原创：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 NDK环境搭建及调用JNI的简单步骤
转载请注明:http://www.cnblogs.com/tiantianbyconan/p/3396595.html Java Native Interface (JNI)标准是java平台的一部分 ...
Android的消息循环机制 Looper Handler类分析
Android的消息循环机制 Looper Handler类分析 Looper类说明 Looper 类用来为一个线程跑一个消息循环. 线程在默认情况下是没有消息循环与之关联的,Thread类在ru ...
node.js Tools for Visual Studio 介绍
node.js Tools for Visual Studio简称NTVS 项目安装包地址:https://nodejstools.codeplex.com 目前支持2012和2013

jquery——九宫格大转盘抽奖