特效介绍
jquery幸运大转盘，jquery转盘抽奖插件
中奖提示效果图
幸运大转盘抽奖jquery插件，转动起来本身不转，而是转盘上的光斑会转动，跑马灯也会跟着闪烁，转的越快，闪烁越快。转动结束，光斑会停留在中奖的那一栏，并且弹出对应的中奖提示，还可以发微博等等。本插件抽奖概率、中奖奖品等等都可以直接在参数中设置，非常方便，而且兼容性非常好。我爱模板网目前测试到了IE7，没有任何问题。
使用方法
第一步：在head引入下面的代码：
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/jqueryui/jqueryui.css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<style type="text/css">
body{background:url('images/bg_01.jpg') top center no-repeat #fff;font:Arial,Helvetica,sans-serif;}
#header{width:960px;margin:0 auto;position:relative;}
#turnplatewrapper{height:592px;width:592px;background:url('images/plate_06.png') top left no-repeat;left:200px;top:20px;position:absolute;-moz-user-select:none;user-select:none;}
#turnplate{height:592px;width:592px;background:url('images/plate_05.png') top left no-repeat;}
#turnplate #awards{position:absolute;width:100%;height:100%;background:url('images/plate_03.png') top left no-repeat;}
#platebtn{position:absolute;top:218px;left:218px;background:url('images/plate_04.png') top left no-repeat;height:155px;width:155px;cursor:pointer;}
#platebtn.hover{background-position:0 -155px }
#turnplate #platebtn.click{background-position:0 -310px }
#gift{width:398px;height:89px;background:url('images/plate_gift_01.png') top left no-repeat;position:absolute;left:90px;top:720px;}
#msg{position:absolute;display:none;top:130px;left:195px;border-radius:5px;color:#333;border:3px solid #FED33f;box-shadow:2px 2px 2px rgba(0,0,0,0.6);background:#fffcf2;width:200px;padding:10px;text-align:center;}
#init{position:absolute;top:50%;left:50%;width:100px;height:30px;border-radius:5px;color:#333;border:3px solid #FED33f;box-shadow:2px 2px 2px rgba(0,0,0,0.6);background:#fffcf2;width:250px;padding:10px;margin-top:-30px;margin-left:-138px;text-align:center;opacity:0.9;filter:alpha(opacity=90);}
#login{margin-left:20px;}
#login .tips{margin-left:50px;font-size:12px;margin-bottom:-5px;}
#login .tips a{color:#039;font-size:16px;text-decoration:underline;}
#login .msg{color:red;}
#login label{height:30px;line-height:30px;font-size:16px;}
#login .ipt{background:#fff;border:1px solid #ccc;height:28px;line-height:28px;margin-bottom:10px;box-shadow:0 1px 0 #fff;border-radius:2px;width:200px;}
#login .ipt:focus{box-shadow:0 0 3px rgba(86,180,289,0.3);border:1px solid #56b4ef;}
#lotteryMsg .msg{font-size:16px;color:red;font-weight:bold; text-align:center;font-size:26px;color:#ba0f54;line-height:1;margin-bottom:10px;}
#lotteryMsg .tips{text-align:center;font-size:14px;}
#lotteryMsg .sp{border-top:1px solid #c3c3c3;border-bottom:0 none transparent;border-right:0 none transparent;border-left:0 none transparent;overflow:hidden;height:0;margin:10px 0;}
#lotteryMsg a{color:#138cbe;}
#lotteryMsg a:hover{color:#039;}
#lotteryMsg .content{border:1px solid #ccc;border-radius:5px;padding:10px;background:#fff;line-height:1.5;}
#top-menu-wrapper{height:51px;background:url('images/bg_02.png') top center repeat-x;margin-bottom:-51px;}
#top-menu{width:960px;margin:0 auto;}
#top-menu a, #top-menu span{line-height:50px;display:inline-block;font-size:16px;color:#fff;text-decoration:1px 1px 2px rgba(0, 0, 0, 0.3);}
#top-menu .user{padding-left:30px;display:inline-block;height:50px;color:#fff;background:url('images/bg_03.png') 0 16px no-repeat;}
</style>
<style type="text/css">
/*jquery ui 定制 */
body .ui-dialog{padding:0px;background:#ebeae3;box-shadow:2px 2px 5px rgba(0,0,0,0.5);}
body .ui-dialog .ui-dialog-titlebar{height:23px;padding:0;margin:0;background:none;border:0 none transparent;}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title{display:none;}
body .ui-widget-content{border:4px solid #F7D102;}
body .ui-dialog .ui-dialog-titlebar-close{background:#f6d20d;right:0;margin-top:-12px;}
body .ui-dialog .ui-dialog-buttonpane{border:0 none transparent;}
body .ui-dialog .ui-button-text{padding:0.8em 1em;}
body .ui-widget-overlay{background:url('images/bg_04.png');_filter:alpha(opacity=60);}
.mv5{margin-left:5px;margin-right:5px;}
</style>
第二步：在body引入相关html代码：
<div id="top-menu-wrapper" class="dn bgfix"> <div id="top-menu"> <div class="l"> <a class="user bgfix" href="http://www.17sucai.com"> </a> <span>（今天还有</span><span class="lottery-times">0</span> <span>次抽奖机会）</span> </div> <a class="logout r" href="http://www.17sucai.com">退出</a> </div> </div> <div id="header"> <div id="turnplatewrapper" onselectstart="return false;" class="bgfix"> <div id="turnplate" class="bgfix"> <div id="awards" class="bgfix"></div> <div id="platebtn" class="bgfix"></div> <p id="msg"></p> <p id="init" class="dn">初始化中，请稍后<span></span></p> </div> </div> <div id="gift" class="bgfix"></div> </div> <div id="lotteryMsg" class="dn"> <p class="msg"></p> <p class="tips">中奖空间已自动添加到您的快盘帐号中，<a href="http://www.5imoban.net" title="网站模板" target="_blank">点击查看</a>。</p> <hr class="sp" /> <p class="mv5" style="margin-bottom:5px">发送以下内容到新浪微博，还可额外获得5M永久空间哦！</p> <div class="content mv5"> “幸运大转盘，快盘送空间” <span class="option"></span>每日大转盘摇奖，轻松扩容，惊喜不断，抢100G永久空间点击->http://www.5imoban.net 同步网盘领军产品，4500万用户的选择，值得信赖。 </div> </div> <!--新登录注册弹框--> <div id="new-login" class="dn"></div>第三步（非必须）：如果要兼容IE6，还要引入一个IE6 PNG透明的js文件和代码：
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('.bgfix');</script>
<![endif]-->
第四步：调用轮盘相关代码：
<script type="text/javascript">
//新登录
$('#new-login').dialog({
modal: true,
width:400,
heigth:220,
resizable: false,
autoOpen: false,
title: '请先登录'
});
</script>
<script type="text/javascript">
var isLogin = false;
</script>
<script type="text/javascript">
var turnplate = {
turnplateBox : $('#turnplate'),
turnplateBtn : $('#platebtn'),
lightDom : $('#turnplatewrapper'),
freshLotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/freshLottery/',
msgBox : $('#msg'),
lotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/lottery/',
height : '592', //帧高度
lightSwitch : 0, //闪灯切换开关. 0 和 1间切换
minResistance : 5, //基本阻力
Cx : 0.01, //阻力系数 阻力公式： totalResistance = minResistance + curSpeed * Cx;
accSpeed : 15, //加速度
accFrameLen : 40, //加速度持续帧数
maxSpeed : 250, //最大速度
minSpeed : 20, //最小速度
frameLen : 10, //帧总数
totalFrame : 0, //累计帧数,每切换一帧次数加1
curFrame : 0, //当前帧
curSpeed : 20, //上帧的速度
lotteryTime : 0, //抽奖次数
lotteryIndex : 6, //奖品index
errorIndex : 6, //异常时的奖品指针
initBoxEle : $('#turnplate #init'),
progressEle : $('#turnplate #init span'),
initProgressContent : '~~~^_^~~~', //初始化进度条的内容
initFreshInterval : 500, //进度条刷新间隔
virtualDistance : 10000, //虚拟路程,固定值，速度越快，切换到下帧的时间越快: 切换到下帧的时间 = virtualDistance/curSpeed
isStop : false, //抽奖锁,为true时，才允许下一轮抽奖
timer2 : undefined, //计时器
initTime : undefined,
showMsgTime : 2000, //消息显示时间
lotteryChannel: '',
channelList: {
'login': '每日登录',
'consume': '购买空间'
},
lotteryType : {
'5M' : 0,
'80M' : 1,
'1G' : 2,
'200M' : 3,
'100M' : 4,
'20M' : 5,
'empty' : 6,
'10G' : 7,
'50M' : 8,
'1T' : 9
},
lotteryList : [
'5M 永久空间',
'80M 永久空间',
'1G 永久空间',
'200M 永久空间',
'100M 永久空间',
'20M 永久空间',
'继续攒人品',
'10G 永久空间',
'50M 永久空间',
'1T 永久空间',
],
lotteryDes : [
'手气一般般，幸运指数半颗星！',
'手气不错呢，幸运指数3颗星！',
'手气无敌了，幸运指数4颗星！',
'手气很好呢，幸运指数3颗星！',
'手气很好呢，幸运指数3颗星！',
'手气还凑合，幸运指数1颗星！',
'手气太差了，幸运指数0颗星！',
'手气太好了，幸运指数5颗星！',
'手气还可以，幸运指数2颗星！',
'手气爆棚了，幸运指数5颗星！'
],
//初始化
init : function() {
this.initAnimate()
this.freshLottery();
this.turnplateBtn.click($.proxy(function(){
this.click();
},this));
},
//初始化动画
initAnimate : function() {
this.initBoxEle.show();
clearTimeout(this.initTimer);
var curLength = this.progressEle.text().length,
totalLength = this.initProgressContent.length;
if (curLength < totalLength) {
this.progressEle.text(this.initProgressContent.slice(0, curLength + 1));
}else{
this.progressEle.text('');
}
this.initTimer = setTimeout($.proxy(this.initAnimate, this), this.initFreshInterval);
},
//停止初始化动画
stopInitAnimate : function() {
clearTimeout(this.initTimer);
this.initBoxEle.hide();
},
freshLotteryTime : function() {
$('#top-menu').find('.lottery-times').html(this.lotteryTime);
},
//更新抽奖次数
freshLottery : function() {
this.stopInitAnimate();
this.setBtnHover();
this.isStop = true;
this.lotteryTime = 1;
this.freshLotteryTime();
},
//设置按钮三态
setBtnHover : function() {
//按钮三态
$('#platebtn').hover(function(){
$(this).addClass('hover');
},function() {
$(this).removeClass('hover click');
}).mousedown(function(){
$(this).addClass('click');
}).mouseup(function(){
$(this).removeClass('click');
});
},
//获取奖品
lottery : function() {
this.lotteryIndex = undefined;
this.lotteryTime--;
this.freshLotteryTime();
this.totalFrame = 0;
this.curSpeed = this.minSpeed;
this.turnAround();
this.lotteryIndex = typeof this.lotteryType[2] !== 'undefined' ? this.lotteryType[2] : this.errorIndex;
this.lotteryChannel = typeof this.channelList[1] !== 'undefined' ? this.channelList[1] : '';
},
//点击抽奖
click : function() {
//加锁时
if(this.isStop == false) {
this.showMsg('现在还不能抽奖哦');
return;
}
this.lottery();
},
//更新当前速度
freshSpeed : function() {
var totalResistance = this.minResistance + this.curSpeed * this.Cx;
var accSpeed = this.accSpeed;
var curSpeed = this.curSpeed;
if(this.totalFrame >= this.accFrameLen) {
accSpeed = 0;
}
curSpeed = curSpeed - totalResistance + accSpeed;
if(curSpeed < this.minSpeed){
curSpeed = this.minSpeed;
}else if(curSpeed > this.maxSpeed){
curSpeed = this.maxSpeed;
}
this.curSpeed = curSpeed;
},
//闪灯,切换到下一张时调用
switchLight : function() {
this.lightSwitch = this.lightSwitch === 0 ? 1 : 0;
var lightHeight = -this.lightSwitch * this.height;
this.lightDom.css('backgroundPosition','0 ' + lightHeight.toString() + 'px');
},
//旋转,trunAround,changeNext循环调用
turnAround : function() {
//加锁
this.isStop = false;
var intervalTime = parseInt(this.virtualDistance/this.curSpeed);
this.timer = window.setTimeout('turnplate.changeNext()', intervalTime);
},
//弹出奖品
showAwards : function(){
$('#lotteryMsg').dialog('open');
},
//显示提示信息
showMsg : function(msg, isFresh) {
isFresh = typeof isFresh == 'undefined' ? false : true;
if(typeof msg != 'string'){
msg = '今天已经抽过奖了，明天再来吧';
}
var msgBox = this.msgBox;
var display = msgBox.css('display');
msgBox.html(msg);
window.clearTimeout(this.timer2);
msgBox.stop(true,true).show();
var fadeOut = $.proxy(function() {
this.msgBox.fadeOut('slow');
}, this);
this.timer2 = window.setTimeout(fadeOut, this.showMsgTime);
},
//切换到下帧
changeNext : function() {
//判断是否应该停止
if(this.lotteryIndex !== undefined && this.curFrame == this.lotteryIndex && this.curSpeed <= this.minSpeed+10 && this.totalFrame > this.accFrameLen) {
this.isStop = true;
this.showAwards();
return;
}
var nextFrame = this.curFrame+1 < this.frameLen ? this.curFrame+1 : 0;
var bgTop = - nextFrame * this.height;
this.turnplateBox.css('backgroundPosition','0 ' + bgTop.toString() + 'px');
this.switchLight();
this.curFrame = nextFrame;
this.totalFrame ++;
this.freshSpeed();
this.turnAround();
}
}
</script>
<script type="text/javascript">
//登录插件
(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.5imoban.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>
具体怎么设置，上面的参数都已说明。