先看效果：

<!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. Junit使用教程

    Junit是Java的单元测试工具,同时也是极限编程的好帮手.Junit4借助于Java5的Annotation(标注类)和静态导入的新特性,与Junit3有很大的区别,所以建议初学者直接使用Juni ...

  2. 定制Maven的ArcheType

    根据需要定制Maven的ArcheType的好处不言而喻了,我就不再啰嗦.定制一般通过从Maven的项目构建,比手动构建省去了配置文件的编写.资源文件的复制等繁琐的操作,下面我们就说下从Maven项目 ...

  3. 关于Edittext默认弹出软键盘为数字键

    如果说我们只是输入数字的话,我们可以直接在xml文件中: android:inputType="number" 如果是身份证类型的话,我们可以这样: android:inputTy ...

  4. HTTPS 为什么更安全，先了解一下密码学的这些原理

    HTTPS 是建立在密码学基础之上的一种安全通信协议,严格来说是基于 HTTP 协议和 SSL/TLS 的组合.理解 HTTPS 之前有必要弄清楚一些密码学的相关基础概念,比如:明文.密文.密码.密钥 ...

  5. Raft算法，从学习到忘记

    Raft算法,从学习到忘记 --Raft算法阅读笔记. --Github 概述 说到分布式一致性算法,可能大多数人的第一反应是paxos算法.但是paxos算法一直以来都被认为是难以理解,难以实现.S ...

  6. hdoj1421(bfs)

    bfs 练习题,简单bfs 题意:给一块地图,找出油田的块的数量,这里要考虑油田的八个方向,上下左右(左右)上(左右)下,存在则可以并在一起.@是油田,*是土地,m是行,n是列. 解题思路:用一个二维 ...

  7. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  8. TCP/IP笔记(二)TCP/IP简介

    上回,主要介绍了下协议和OSI参考模型,并简单了解下网络构成要素,这回该说说TCP/IP了 互联网与TCP/IP的关系   互联网进行通信时,需要相应的网络协议,TCP/IP原本就是为使用互联网而开发 ...

  9. 【转】如何成为一位优秀的创业CEO

    编者按:本文来自 Ryan Allis,是一位来自旧金山的创业者和投资人.在 2003 年创立了 iContact,并任 CEO. 做创业公司的 CEO 可以说是世界上最有挑战性的事情之一.你得让客户 ...

  10. 对VC++6.0爱得深沉（一）安装vc++6.0，支持winXP，win7，win8.1,win10

    [欢迎入坑] 从这里起,我称VC++6.0为小c. 为什么我对小c爱得深沉? 虽然饱受非议,但是,我只想说,我太单纯,小c轻轻松松成功运行在各个win平台,对于我来说她:高速.小巧.便捷.听话.可定制 ...