转盘抽奖插件-jquery.lottery.js

最新推荐文章于 2024-06-06 09:43:29 发布

vuturn

最新推荐文章于 2024-06-06 09:43:29 发布

阅读量9.9k

点赞数 6

分类专栏：插件文章标签： jquery插件转盘抽奖抽奖

本文链接：https://blog.csdn.net/vuturn/article/details/50470197

版权

插件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

插件说明：

用于转盘随机抽奖，现在设的是转盘的指针动，指针停留的位置需要自己设置，需要后端返回的数据类型格式为一等奖：{code : 1 ,msg :'一等奖' } 失败 {code : 5XX,msg:' '}

可以把成功和失败返回的后台数据，利用 success 和 error回调函数进行处理。效果：

关于如何设置指针停留的角度，打开控制台，选中指针，修改其

transform: rotate(67deg);

插件依赖：

jquery.easing.js jQueryRotate.js

参数说明：

duration

转动的时间单位ms 默认为 duration: 5000

round

转动的圈数 360 * n 默认为 round:1440

success

中奖后的回调默认为 success:function(){}

error

出错后的回调默认为 error:function(){}

setAngle

设置指针停的位置该参数必须自己根据实际开发情景配置

setAngel:{
 0:[70,114,201,289,335],    //未中奖代表的角度
 1:158, //一等奖的角度
 2:244, //二等奖
 3: 25  //三等奖
}

url

后台数据来源的url 默认为 url:‘’

data

向后台传的数据默认为 data : ‘’

调用：

$('#luckyDraw').lottery(options);

源码：

/*
抽奖插件
依赖后端数据类型{code:0} code代表几等奖 {code : 5XX}代表失败
需要配置的参数：setAngel:{
 0:[70,114,201,289,335],    //未中奖代表的角度
 1:158, //一等奖的角度
 2:244, //二等奖
 3: 25  //三等奖
}
调用 $('#luckyDraw').lottery(options);
依赖的文件 jquery.easing.js  jQueryRotate.js
 */


;(function($,window,document){
    var defaults = {
        //指针转动的时间 ms
        duration : 5000,
        //圈数 360* n
        round : 1440,
        //指针初始位置
        angel : 0,
        //中奖后的回调
        success: function (rs) {

        },
        //出错后的回调
        error : function(rs){

        },
        //角度及奖项设置
        setAngle: {
            0:[70,114,201,289,335],
            1:158,
            2:244,
            3: 25
        },
        //数据来源
        url:'',
        //发送的数据
        data:''
        },
        //缓存
        _that,
        //构造函数
        Plugin = function(element,options){
            this.element = element;
            this.options = $.extend({},defaults,options);
            this.init();
        };
    Plugin.prototype.init = function(element,options){
        _that = this;
        //绑定元素click
        $(this.element).rotate({
            bind:{
                click:function(){
                    sendMsg(_that.options.url,_that.options.data)
                }
            }
        });
    };
    //插件
    jQuery.fn.lottery = function(options){
        return this.each(function(){
            if(!$.data(this,'lottery')){
                $.data(this,'lottery',new Plugin(this,options));
            }
        })
    };
    //发送请求
    var sendMsg = function(url ,data){
        $.get(url,data,function(rs){
            var rs = window._rs = JSON.parse(rs);
            //成功后的回调
            rs.code > 500 ? _that.options.error(rs) :
                //失败后的回调
                rotateFunc(rs.code,_that.options.setAngle[rs.code],_that.options.success);
        });
        },
        //指针移动
        rotateFunc = function(awards, angel, callback){
            $(_that.element).stopRotate();
            $(_that.element).rotate({
                angel : 0,
                duration : _that.options.duration,
                callback : function(){
                    callback.call(null,window._rs);
                }
            })
        };

})(jQuery,window,document,undefined);