用jquery通过配置参数实现抽奖转盘

1.html代码

<!DOCTYPE html>

<html lang="zh-CN">

    <head>

        <meta charset="UTF-8">

        <title>抽奖活动</title>

        <meta name="keyword" content="">

        <meta name="description" content="">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="renderer" content="webkit">

        <script type="text/javascript" src="js/jquery.js"></script>

        <!-- 业务样式 -->

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <!--[if lt IE 9]>

        <link rel="stylesheet" href="http://static.51offer.com/skin/css/study-abroad-steps/ie.css"/>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>

        <![endif]-->

    </head>

    <body>

        <div class="container">

            <div class="container_wrap">

                <div class="container_left clearfix" id="zhuanpan">

                    <div class="zhuanpan">

                        <ul class="zhuanpan1">

                            <li class="libao"></li>

                            <li class="mobile_shell"></li>

                            <li class="note"></li>

                            <li class="better"></li>

                            <li class="quan"></li>

                            <li class="tshirt"></li>

                        </ul>

                    </div>

                    <img class="choujiang" src="img/choujiang.png">

                    <img class="have_choujiang" src="img/reward.png">

                </div>

            </div>

        </div>

        <script type="text/javascript" src="js/index.js"></script>

    </body>

</html>

2.调用的js

var config = {

    "rollId": '#rollId', //外层divid

    "rollBtn": ".rollBtn", //点击滚动的按钮--class

    "rollList": ".rollList",

    "pinIndex": 0, //滚动的起点

    "speed": 200, //滚动的速度

    "cycle": 0, //滚动的圈数

    "fastCycle": 5, //快速滚动圈数

    "rollResult": 4 //抽奖的结果

};

var Roll = function() {

    var self = this;

    self.config = config;

    self.stopIndex = '';

    self.isRolling = false;

    self.timer = null;

    self.ops = '';

    self.rollId = '';

    self.rollBtn = '';

    self.rollList = '';

    self.rollIndex = 0;

}

var roll=new Roll();

$(function(){

	$(".choujiang").on("click",function(){

		rollFun(4);

	});

})

function rollFun(prize_code) {

    roll.init({

        "rollId": '#zhuanpan',

        "rollBtn": ".choujiang",

        "rollList": ".zhuanpan1",

        "pinIndex": 0,

        "rollResult": prize_code

    });

    roll.start();

}

Roll.prototype.init = function(options) {

    var self = this;

    self.ops = $.extend({}, self.config, options);

    self.rollId = $(self.ops.rollId);

    self.rollBtn = self.rollId.find(self.ops.rollBtn);

    self.rollList = self.rollId.find(self.ops.rollList).find('li');

    self.stopIndex = self.ops.rollResult;

};

// 按钮事件

Roll.prototype.start = function() {

    this.rollPre();

};

Roll.prototype.rollPre = function() {

    var self = this;

    if (!self.isRolling) {

        self.rollList.eq(self.ops.pinIndex).show().siblings().hide();

        rollStart(self); // 开始启动转盘

    }

};

// 指向下一个

function rollGoNext(self) {

    self.rollIndex += 1;

    if (self.rollIndex > self.rollList.length) {

        self.rollIndex = 0;

        self.ops.cycle++;

    }

    self.rollList.eq(self.rollIndex).show().siblings().hide();

}

// 停止转动

function rollStop(self) {

    clearInterval(self.timer);

    (function stopGoNext() {

        if (self.rollIndex !== self.stopIndex) {

            rollGoNext(self);

            setTimeout(function() {

                stopGoNext();

            }, 300);

        } else {

            self.isRolling = false;

            self.ops.cycle = 0;

            self.rollIndex = 0;

            $(".choujiang").hide();

            $(".have_choujiang").show();

            // self.ev.trigger('succeed', {

            //     rollResult: self.stopIndex

            // });

        }

    })();

}

//开始转动

function rollStart(self) {

    self.isRolling = true;

    self.timer = setInterval(function() {

        rollGoNext(self);

        if (self.rollIndex == 5) {

            clearInterval(self.timer);

            self.ops.speed = 20;

            self.timer = setInterval(function() {

                rollGoNext(self);

                if (self.ops.cycle >= 5) {

                    clearInterval(self.timer);

                    self.ops.speed = 200;

                    self.timer = setInterval(function() {

                        if (self.ops.cycle === 6) {

                            rollStop(self);

                        } else {

                            rollGoNext(self);

                        }

                    }, self.ops.speed);

                }

            }, self.ops.speed);

        }

    }, self.ops.speed);

}

3.效果图

源代码：http://files.cnblogs.com/files/gzx618/roll.zip

jquery实现抽奖转盘的更多相关文章

  1. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

  2. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

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

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

  4. 使用CSS3+jquery.js 实现微信抽奖转盘效果

    上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”! 为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果.并不需要依赖 ...

  5. 用jquery实现抽奖小程序

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

  6. jquery实现抽奖

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

  7. Html5-Canvas实现简易的抽奖转盘

    ###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码 <body> < ...

  8. 模仿抽奖转盘,并且用cookie记录历史次数

    自己制作了一个模仿抽奖转盘的小游戏,代码比较简单,规则是只有三次抽奖机会,并且浏览器会记录抽奖的次数, 代码如下 <!DOCTYPE html> <html> <head ...

  9. Android实现抽奖转盘

    一.SurfaceView认识及的应用的思路 SurfaceView继承自(extends)View,View是在UI线程中进行绘制: 而SurfaceView是在一个子线程中对自己进行绘制,优势:避 ...

随机推荐

  1. Particle designer 粒子工具中属性对应功能的简单介绍

    粒子配置 Max Particles 粒子的数量  一般而言,我们的目标是用最少的粒子创造出所需的效果.单个粒子的大小对游戏运行效率也有很大的影响——单个粒子越小,性能越高. Lifespan 生命周 ...

  2. 关于dispatchTouchEvent, onInterceptTouchEvent, onTouchEvent的分发机制浅析

    虽说这个问题不是很难...动动手就能看出答案...但是似乎不太容易理解...几次尝试把这个问题说明白....但是好像感觉说不明白....(顿时想起了那句话----说不明白就是自己还不明白! 我怎么可能 ...

  3. RPC框架Thrift例子-PHP调用C++后端程序

    更新 2016-02-22: Response对象不用主动创建. 前言 前段时间用了一下Facebook的开源RPC框架Thrift,做PHP客户端调用C++后端程序,真心觉得Thrift不错! 本文 ...

  4. View绘制详解(五)，draw方法细节详解之View的滚动/滑动问题

    关于View绘制系列的文章已经完成了四篇了,前面四篇文章主要带小伙伴们熟悉一下View的体系的整体框架.View的测量以及布局等过程,从本篇博客开始,我们就来看看View的绘制过程.View的绘制涉及 ...

  5. Jfinal学习笔记

    实习期间,公司使用jfinal做开发,所以就学习了这个框架 Jfinal作为一个极速ORM,使用上非常方便,核心源代码1万多行,压缩后只有200多KB. 从入口开始 作为一个web项目,首先解读web ...

  6. css3 伪对象选择器添加几何图形文字的方法

    伪对象选择器包含三种,分别为: E::selection E::after E::before 其中before和after必须与content结合使用,如果content想用几何图形要加 \ 进行转 ...

  7. 在Code first中使用数据库里的视图

    如果想在Code first中使用数据库里的视图 (不管你出于什么原因),目前的方法有2种. 一.使用Database.SqlQuery<T>("查询语句"),如: v ...

  8. C语言预处理操作符

    在看<深入剖析Nginx>时看见一个非常少见的C语言知识点:预处理操作符. #define conn(x,y) x##y //将子串x和y连接形成新的串 #define tochar(x) ...

  9. KindEditor编辑器, 利用ajax动态切换编辑器内容

    // 后台成功返回数据后的js处理 KindEditor.remove('#content_id'); // 先移除之前创建的编辑器 var editor = KindEditor.create('# ...

  10. Linux基本命令之逻辑测试一

    1.判断一个命令的结果使用test,其返回0,或一个整数.返回0表示true,返回整数表示错误码 2.获取上一个命令的返回结果使用$? 3.例如 我的服务器上面存在/home/www这样一个文件夹,所 ...