先看效果：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>转盘抽奖二</title>

    <style>

        *{margin:0;padding: 0;}

        #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('./img/lottery1.jpg') no-repeat top center;}

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

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

        .mask{width:100%;height:100%;position:absolute;left:0;top:0;background-color: rgba(252,211,4,0.5); display:none; }

    </style>

</head>

<body>

<div id="lottery">

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

        <tr>

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

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

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

        </tr>

        <tr>

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

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

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

        </tr>

        <tr>

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

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

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

        </tr>

    </table>

</div>

<script src="../js/jquery.1.10.0.js"></script>

<script>

    $(function () {

        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); //抽奖转盘节点ID

                    $units = $lottery.find(".lottery-unit"); //奖品节点

                    this.obj = $lottery;  //把抽奖转盘节点对象赋值给lottery对象的obj属性

                    this.count = $units.length; //把奖品节点的长度赋值给lottery的count属性

                    $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; //将转动到的位置增加1

                if (index > count - 1) {    //判断如果当前转动到的位置大于奖品节点总长度-1，则让当前转动到的位置重置为0;

                    index = 0;

                };

                $(lottery).find(".lottery-unit-" + index).addClass("active");   //然后给当前转动到的位置添加当前状态

                this.index = index; //把当前转动到的位置赋值给lottery对象的index属性

                return false; //返回false,终止程序

            },

            stop: function (index) {    //停止转动，返回中奖位置

                this.prize = index;

                return false;   //返回false,终止程序

            }

        };

        //定义一个转动的方法roll()

        function roll() {

            lottery.times += 1; //调用lottery对象的times属性并且在每次调用时加1

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

            //判断，如果转动次数大于转动基本次数加10（转动多少次后进入抽奖）并且中奖位置等于当前转动的位置的时候

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

                clearTimeout(lottery.timer); //清除转动的定时器

                lottery.prize = -1; //重置prize属性为-1

                lottery.times = 0;  //重置转动次数times为0

                click = false;  //重置变量click为false;ps:click变量用来在点击抽奖后不能在点击抽奖按钮，防止造成定时器叠加

            } else {

                //否则，即转动次数times<=转动基本次数时并且中奖位置和当前转动位置不相等的时候

                //判断如果转动次数小于转动基本数的时候

                if (lottery.times < lottery.cycle) {

                    //让转动速度减少10并重新赋值给属性speed

                    lottery.speed -= 10;

                    //否则如果，转动次数等于转动基本数的时候

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

                    //转动基本数等于转动次数后产生抽奖结果

                    //通过一个随机数生成，把随机数赋值给新声明的变量index

                    var index = Math.random() * (lottery.count) | 0; //中奖物品通过一个随机数生成

                    lottery.prize = index; //把中间物品赋值给lottery对象的prize属性

                } 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;

                };

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

            };

            return false;

        };

        //方法调用

        var click = false;

        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>

</body>

</html>

jquery转盘抽奖的研究的更多相关文章

  1. jquery——九宫格大转盘抽奖

    一.用到的图片 二.代码如下,重点是js部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Con ...

  2. 用jQuery和PHP来实现转盘抽奖程序

    准备工作 首先要准备素材,抽奖的界面用到两张图片,圆盘图片和指针图片,实际应用中可以根据不同的需求制作不同的圆盘图片. 接着制作html页面,实例中我们在body中加入如下代码: <div cl ...

  3. jquery实现转盘抽奖

    jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

  4. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

  5. javascript 转盘抽奖代码和计数器代码

    要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下  看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究...  效果预览: 一.模拟抽奖的实 ...

  6. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  7. jquery实现抽奖

    用jquery实现抽奖小程序   用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jq ...

  8. css3转盘抽奖

    做到一个活动,需要转盘抽奖,于是想到使用css3的动画效果,其中主要包含transition的动画过渡,transform的rotate的旋转效果,在这里只用到2d的旋转, 特别强调的是,因为需要和后 ...

  9. jquery实现抽奖小游戏

    在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...

随机推荐

  1. NSTimer定时器进阶——详细介绍，循环引用分析与解决

    引言 定时器:A timer waits until a certain time interval has elapsed and then fires, sending a specified m ...

  2. 【曝】苹果应用商店逾千款iOS应用存安全漏洞

    据国外网站Ibtimes报道,知名网络安全公司FireEye日前警告称,由于一款名为“JSPatch”.可帮助开发者修改应用程序的软件上存在安全漏洞,导致苹果应用商店内1000多款使用了该框架的iOS ...

  3. Java虚拟机（JVM）

    Java虚拟机 Java字节码通过类加载器(Class Loader)为程序的执行加载所需要的全部类.在类的加载过程中,由于是按照先加载启动类库.再加载扩展类库最后加载用户自定义类库的顺序,从而避免一 ...

  4. wemall app商城源码Android之Native（原生）支付模式一demo

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享Native(原生)支付模式一demo,供技术 ...

  5. JavaWeb---javabean

    1.javabean 1.1--javabean的创建方法 1.2-javabean可以使用跟java一样的方法创建javabean实例 创建一个普通类Users(1.共有类 2.私有属性 3.无参构 ...

  6. wx模块小实例

    功能介绍: 查询数据库表数据,提取数据并显示 main.py(执行文件) #coding:gbk __author__ = 'Hito' import querySmscode import wx c ...

  7. 菜鸟Scrum敏捷实践系列（三）用户故事的组织---功能架构的规划

    菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 采用Sc ...

  8. curl中通过json格式吧post值返回到java中遇到中文乱码的问题

    首先是: curl中模拟http请求: curl -l 127.0.0.1:8080/spacobj/core/do?acid=100 -H "token:101hh" -H &q ...

  9. MFC画笔作用域的问题

    今天发现了程序中的一个BUG.功能是在鼠标经过图形时,对图形进行加粗重绘.默认使用白色画刷.为防止白色背景下看不清,在白色背景下改用黑色画刷.代码如下 CPen* pOldPen;if (pDC-&g ...

  10. Hive 伪分布式下安装

    本安装过程只作为个人笔记用,非标准教程,请酌情COPY.:-D Hive下载 下载之前,需先查看兼容的Hadoop版本,并安装hadoop,参考 http://www.cnblogs.com/yong ...