一、用到的图片

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

随机推荐

初学File类
对File类的基本方法的理解今天刚开始学了File类一开始看思想编程看得迷迷糊糊的,之后受不了了,直接去看API文档归纳: File->java.util File类的主要方法: 构造方法 ...
FingerprintJS - 在浏览器端实现指纹识别
FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. ...
imagesLoaded – 检测网页中的图片是否加载
imagesLoaded 是一个用于来检测网页中的图片是否载入完成的 JavaScript 工具库.支持回调的获取图片加载的进度,还可以绑定自定义事件.可以结合 jQuery.RequireJS 使用 ...
高清DVI编码器|上海视涛科技
DVI编码器(E600)简介高清DVI编码器是上海视涛科技出品的高性能DVI编码产品.该DVI编码器是上海视涛科技完全自主研发,并适用于VGA.DVI.HDMI等信号的编码采集及网络传输的专用硬件设 ...
UIWebView的应用和其中的JS与OC间传值
现在有很多的应用已经采用了WebView和html语言结合的开发模式.html5一直很火因为一份代码可以在多个平台上运用啊,效果各不相同都很美观,也越来越有一些公司直接招后台程序员和html5程序员, ...
Android studio .gitignore 文件的内容
# built application files *.apk *.ap_ # files for the dex VM *.dex # Intellij project files .idea/ . ...
安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
Android 6 检查权限代码
private static final int MY_PERMISSIONS_REQUEST_READ_CONTACTS= 0; //检查目前是否有权限 if (checkSelfPermissio ...
xcode 7及以上版本网络请求不成功的原因
在Xcode 7以前的版本使用的是http协议,从Xcode 7开始,默认使用的是https协议,这优化了加密性能. 要想在Xcode 7及以上版本能够进行网络请求,我们需要在info.plist文件 ...
常见HTTP状态码
常见HTTP状态码 200 OK 301 Moved Permanently 302 Found 304 Not Modified 307 Temporary Redirect 400 Bad Req ...

jquery——九宫格大转盘抽奖