先看效果：

<!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. 前端面试题总结：HTML5，JS，CSS3，兼容性。

    1. 请写出至少20个HTML5标签 <article><aside> <audio><video> <canvas><datalis ...

  2. 让SQL再快一点儿

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 SQL即结构化查询语言(Structured Query Language),是一种特殊目的的编程语言,是一种数据库查询和程序设计语 ...

  3. 微信小程序之提高应用速度小技巧

    作者:vicyao, 腾讯web前端开发 高级工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/294.htm ...

  4. linux系统常用快捷键

    centos 命令快捷键: 挂起:Ctrl+s 解除挂起:ctrl+q 清屏:Ctrl+l 注销或退出:Ctrl+d 命令行光标移动: Ctrl+a 移动到命令行首 Ctrl+e 移动到命令行尾 Ct ...

  5. Linux screen 常用命令

    想必,只要接触过Linux一段时间的人,一定知道screen这个神奇的工具了,它主要有如下些优势: 1. 后台运行:当你在ssh terminal执行shell时,如果网络这时断开,你的程序会怎样?T ...

  6. javascript写贪吃蛇游戏（20行代码！）

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  7. [项目记录] 用c语言完成的一个学生成绩管理系统

    一.要求: 学生成绩管理系统 某班有最多不超过30人(具体人数由键盘输入)参加期末考试,最多不超过6门(具体门数由键盘输入).使用链表编程实现如下菜单驱动的学生成绩管理系统. 从文件读入每个学生个人信 ...

  8. Excel制作多选下拉框代码以及图示

    1.首先  点击Sheet1(需要显示多选框的页) ,然后右键查看代码,进入编辑界面 2.写入如下代码 Private Sub Worksheet_SelectionChange(ByVal Targ ...

  9. mvalidator手机端校验

    官网地址:https://github.com/efri-yang/mobileValidate#%E5%8F%82%E6%95%B0 使用方法: html如下: <li class=" ...

  10. 结队编程study

    ##今天针对study进行结队编程,我和搭档张佳慧刚开始误认为SystemBarTintManager,baseActivity是personalActivity跳转的下一个界面,因为这个代码个人中心 ...