外掛說明：

用於轉盤隨機抽獎，現在設的是轉盤的指標動，指標停留的位置需要自己設定，需要後端返回的資料型別格式為  一等獎：{code : 1 ,msg :'一等獎' }  失敗  {code : 5XX,msg:' '}

可以把成功和失敗返回的後臺資料， 利用 success 和 error回撥函式進行處理。效果：

關於如何設定指標停留的角度，開啟控制檯，選中指標，修改其

1. 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);
 

DEMO