js框架jquery实现灯光圆盘抽奖程序活动特效

看见抽奖圆盘是不是会想是怎么实现的呢？下面就让我们来看看。

效果图如下：

文件引用：

<script>

//登录插件

(function($){

    $.fn.login = function(options){

        settings = {

                loginUrl: 'account/login/',

                msgEle: $(this).find('.msg'),

                loginIdEle: $(this).find('#loginId'),

                passwordEle: $(this).find('#password')

        };

        var ERROR_MSG = {

            'inputCorrectEmail': '请输入正确的用户名',

            'inputPassword': '请填写登录密码',

            'passwordLength': '密码应在6-32位字符内',

            'noreg': '此账号未注册',

            'checkemailcode_2':'此账号未注册',

            'checkemailcode_':'服务器繁忙，请稍后再试',

            'accountNotMatch': '账号密码不匹配',

            'serverdown': '服务器维护中',

            'clientUserBaned': '您的账号被限制登录',

            'accUserInvalid': '正在对该账号进行绑定处理，暂无法登陆',

            'userLocked': '帐号锁定中，暂时无法登录',

            'inviladId': '帐号不存在'

        }

        function submit() {

            var loginId = $.trim(settings.loginIdEle.val()),

            password = $.trim(settings.passwordEle.val());

            if(loginId == '') {

                showMsg('登录名不能为空');

                return;

            }

            if(password == '') {

                showMsg('密码不能为空');

                return;

            }

            $.post(settings.loginUrl, {'loginId': loginId, 'password': password}, function(data){

                if(data.status == 'ok') {

                    location.reload();

                } else {

                    if(typeof ERROR_MSG[data.status] == 'string') {

                        showMsg(ERROR_MSG[data.status]);

                    } else {

                        showMsg('服务器维护中');

                    }

                }

            }, 'json');

        }

        function showMsg(msg) {

            settings.msgEle.html(msg);

        }

        if(typeof options == 'string'){

            switch(options) {

                case 'submit':

                    submit();

                    break;

                default:

            }       

        }

        return $(this);

    }

})(jQuery);

$('#lotteryMsg').dialog({

    modal: true,

    width: 500,

    height: 350,

    resizable: false,

    title: '获奖信息',

    autoOpen: false,

    open: function(){

            var showMsg = '您抽中了： ' + turnplate.lotteryList[turnplate.lotteryIndex] /*+ ' (来自:' + turnplate.lotteryChannel + ')'*/;

            var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];

            $('#lotteryMsg').find('.msg').html(showMsg);

            $('#lotteryMsg').find('.option').html(options);

    },

    buttons: [{

        text:'发微博领5M空间',

        click: function() {

            var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];

            var jumpUrl = "http://www.xwcms.net";

            window.open(jumpUrl, "top", "width=1024,height=750,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");

            $(this).dialog('close');

        }

    }]

});

$('#login').dialog({

    modal: true,

    width: 350,

    resizable: false,

    title: '请先登录',

    autoOpen: false,

    open: function(){

        //监听回车事件

        $('#login').bind('keydown', function(e){

            if(e.which == '13'){

                $('#login').login('submit');

            }

        });

    },

    close: function(){

        //取消监听

        $('#login').unbind('keydown');

        $('#login #password').val('');

    },

    buttons:[{

        text: '登录',

        click: function(){

            $('#login').login('submit');

        }

    }]

});

turnplate.init();

</script> 

欢迎下载哦。。

原文地址：http://www.xwcms.net/js/qttx/95945.html

由最代码官方编辑于2016-6-3 9:32:54