首页 > 特效插件 > 图像特效 >  jquery转盘抽奖代码,带跑马灯正文

jquery转盘抽奖代码,带跑马灯

特效介绍

jquery幸运大转盘，jquery转盘抽奖插件


中奖提示效果图

幸运大转盘抽奖jquery插件，转动起来本身不转，而是转盘上的光斑会转动，跑马灯也会跟着闪烁，转的越快，闪烁越快。转动结束，光斑会停留在中奖的那一栏，并且弹出对应的中奖提示，还可以发微博等等。本插件抽奖概率、中奖奖品等等都可以直接在参数中设置，非常方便，而且兼容性非常好。我爱模板网目前测试到了IE7，没有任何问题。
使用方法
第一步：在head引入下面的代码：
查看代码
打印?
01<link rel="stylesheet" type="text/css" href="css/reset.css" />
02<link rel="stylesheet" type="text/css" href="css/common.css" />
03<link rel="stylesheet" type="text/css" href="css/jqueryui/jqueryui.css" />
04<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
05<script type="text/javascript" src="js/jqueryui.js"></script>
06<style type="text/css">
07body{background:url('images/bg_01.jpg') top center no-repeat #fff;font:Arial,Helvetica,sans-serif;}
08#header{width:960px;margin:0 auto;position:relative;}
09#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;}
10#turnplate{height:592px;width:592px;background:url('images/plate_05.png') top left no-repeat;}
11#turnplate #awards{position:absolute;width:100%;height:100%;background:url('images/plate_03.png') top left no-repeat;}
12#platebtn{position:absolute;top:218px;left:218px;background:url('images/plate_04.png') top left no-repeat;height:155px;width:155px;cursor:pointer;}
13#platebtn.hover{background-position:0 -155px }
14#turnplate #platebtn.click{background-position:0 -310px }
15#gift{width:398px;height:89px;background:url('images/plate_gift_01.png') top left no-repeat;position:absolute;left:90px;top:720px;}
16#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;}
17 
18#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);}
19#login{margin-left:20px;}
20#login .tips{margin-left:50px;font-size:12px;margin-bottom:-5px;}
21#login .tips a{color:#039;font-size:16px;text-decoration:underline;}
22#login .msg{color:red;}
23#login label{height:30px;line-height:30px;font-size:16px;}
24#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;}
25#login .ipt:focus{box-shadow:0 0 3px rgba(86,180,289,0.3);border:1px solid #56b4ef;}
26 
27#lotteryMsg .msg{font-size:16px;color:red;font-weight:bold; text-align:center;font-size:26px;color:#ba0f54;line-height:1;margin-bottom:10px;}
28#lotteryMsg .tips{text-align:center;font-size:14px;}
29#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;}
30#lotteryMsg a{color:#138cbe;}
31#lotteryMsg a:hover{color:#039;}
32#lotteryMsg .content{border:1px solid #ccc;border-radius:5px;padding:10px;background:#fff;line-height:1.5;}
33#top-menu-wrapper{height:51px;background:url('images/bg_02.png') top center repeat-x;margin-bottom:-51px;}
34#top-menu{width:960px;margin:0 auto;}
35#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);}
36#top-menu .user{padding-left:30px;display:inline-block;height:50px;color:#fff;background:url('images/bg_03.png') 0 16px no-repeat;}
37</style>
38<style type="text/css">
39/*jquery ui 定制 */
40body .ui-dialog{padding:0px;background:#ebeae3;box-shadow:2px 2px 5px rgba(0,0,0,0.5);}
41body .ui-dialog .ui-dialog-titlebar{height:23px;padding:0;margin:0;background:none;border:0 none transparent;}
42body .ui-dialog .ui-dialog-titlebar .ui-dialog-title{display:none;}
43body .ui-widget-content{border:4px solid #F7D102;}
44body .ui-dialog .ui-dialog-titlebar-close{background:#f6d20d;right:0;margin-top:-12px;}
45body .ui-dialog .ui-dialog-buttonpane{border:0 none transparent;}
46body .ui-dialog .ui-button-text{padding:0.8em 1em;}
47body .ui-widget-overlay{background:url('images/bg_04.png');_filter:alpha(opacity=60);}
48.mv5{margin-left:5px;margin-right:5px;}
49</style>
第二步：在body引入相关html代码：
查看代码
打印?
01<div id="top-menu-wrapper" class="dn bgfix">
02    <div id="top-menu">
03        <div class="l">
04            <a class="user bgfix" href="http://www.17sucai.com"> </a>
05            <span>（今天还有</span><span class="lottery-times">0</span>
06            <span>次抽奖机会）</span>
07        </div>
08        <a class="logout r" href="http://www.17sucai.com">退出</a>
09    </div>
10</div>
11 
12<div id="header">
13    <div id="turnplatewrapper" onselectstart="return false;" class="bgfix">
14        <div id="turnplate" class="bgfix">
15            <div id="awards" class="bgfix"></div>
16            <div id="platebtn" class="bgfix"></div>
17            <p id="msg"></p>
18            <p id="init" class="dn">初始化中，请稍后<span></span></p>
19        </div>
20    </div>
21    <div id="gift" class="bgfix"></div>
22</div>
23 
24 
25<div id="lotteryMsg" class="dn">
26    <p class="msg"></p>
27    <p class="tips">中奖空间已自动添加到您的快盘帐号中，<a href="http://www.5imoban.net" title="网站模板" target="_blank">点击查看</a>。</p>
28    <hr class="sp" />
29    <p class="mv5" style="margin-bottom:5px">发送以下内容到新浪微博，还可额外获得5M永久空间哦！</p>
30    <div class="content mv5">
31        “幸运大转盘，快盘送空间” <span class="option"></span>每日大转盘摇奖，轻松扩容，惊喜不断，抢100G永久空间点击->http://www.5imoban.net 同步网盘领军产品，4500万用户的选择，值得信赖。
32    </div>
33</div>
34 
35 
36<!--新登录注册弹框-->
37<div id="new-login" class="dn"></div>
第三步（非必须）：如果要兼容IE6，还要引入一个IE6 PNG透明的js文件和代码：
查看代码
打印?
1<!--[if IE 6]>
2<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
3<script>DD_belatedPNG.fix('.bgfix');</script>
4<![endif]-->
第四步：调用轮盘相关代码：
查看代码
打印?
001<script type="text/javascript">
002//新登录
003$('#new-login').dialog({
004    modal: true,
005    width:400,
006    heigth:220,
007    resizable: false,
008    autoOpen: false,
009    title: '请先登录'
010});
011</script>
012 
013<script type="text/javascript">
014var isLogin = false;
015</script>
016 
017<script type="text/javascript">
018var turnplate = {
019    turnplateBox : $('#turnplate'),
020    turnplateBtn : $('#platebtn'),
021    lightDom : $('#turnplatewrapper'),
022    freshLotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/freshLottery/',
023    msgBox : $('#msg'),
024    lotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/lottery/',
025    height : '592', //帧高度
026    lightSwitch : 0, //闪灯切换开关. 0 和 1间切换
027    minResistance : 5, //基本阻力
028    Cx : 0.01, //阻力系数 阻力公式：  totalResistance = minResistance + curSpeed * Cx;  
029    accSpeed : 15, //加速度
030    accFrameLen : 40, //加速度持续帧数
031    maxSpeed : 250, //最大速度
032    minSpeed : 20, //最小速度
033    frameLen : 10, //帧总数
034    totalFrame : 0, //累计帧数,每切换一帧次数加1
035    curFrame : 0, //当前帧
036    curSpeed : 20, //上帧的速度
037    lotteryTime : 0, //抽奖次数
038    lotteryIndex : 6, //奖品index
039    errorIndex : 6, //异常时的奖品指针
040    initBoxEle : $('#turnplate #init'),
041    progressEle : $('#turnplate #init span'),
042    initProgressContent : '~~~^_^~~~', //初始化进度条的内容
043    initFreshInterval : 500, //进度条刷新间隔
044    virtualDistance : 10000, //虚拟路程,固定值，速度越快，切换到下帧的时间越快: 切换到下帧的时间 = virtualDistance/curSpeed
045    isStop : false, //抽奖锁,为true时，才允许下一轮抽奖
046    timer2 : undefined, //计时器
047    initTime : undefined,
048    showMsgTime : 2000, //消息显示时间
049    lotteryChannel: '',
050 
051    channelList: {
052        'login': '每日登录',
053        'consume': '购买空间'
054    },
055 
056    lotteryType : {
057        '5M' : 0,  
058        '80M' : 1,
059        '1G' : 2,
060        '200M' : 3,
061        '100M' : 4,
062        '20M' : 5,
063        'empty' : 6,
064        '10G' : 7,
065        '50M' : 8,
066        '1T' : 9
067    },
068 
069    lotteryList : [
070        '5M 永久空间',
071        '80M 永久空间',    
072        '1G 永久空间',     
073        '200M 永久空间',       
074        '100M 永久空间',       
075        '20M 永久空间',    
076        '继续攒人品',       
077        '10G 永久空间',    
078        '50M 永久空间',    
079        '1T 永久空间',
080    ],
081 
082    lotteryDes : [
083        '手气一般般，幸运指数半颗星！',
084        '手气不错呢，幸运指数3颗星！',
085        '手气无敌了，幸运指数4颗星！',
086        '手气很好呢，幸运指数3颗星！',
087        '手气很好呢，幸运指数3颗星！',
088        '手气还凑合，幸运指数1颗星！',
089        '手气太差了，幸运指数0颗星！',
090        '手气太好了，幸运指数5颗星！',
091        '手气还可以，幸运指数2颗星！',
092        '手气爆棚了，幸运指数5颗星！'
093    ],
094 
095    //初始化
096    init : function() {
097        this.initAnimate()
098        this.freshLottery();
099        this.turnplateBtn.click($.proxy(function(){
100            this.click();  
101        },this));  
102    },
103 
104    //初始化动画
105    initAnimate : function() {
106        this.initBoxEle.show();
107        clearTimeout(this.initTimer);
108        var curLength = this.progressEle.text().length,
109            totalLength = this.initProgressContent.length;
110 
111        if (curLength < totalLength) {
112            this.progressEle.text(this.initProgressContent.slice(0, curLength + 1));
113        }else{
114            this.progressEle.text('');
115        }
116        this.initTimer = setTimeout($.proxy(this.initAnimate, this), this.initFreshInterval);
117    },
118 
119    //停止初始化动画
120    stopInitAnimate : function() {
121        clearTimeout(this.initTimer);
122        this.initBoxEle.hide();
123    },
124 
125    freshLotteryTime : function() {
126        $('#top-menu').find('.lottery-times').html(this.lotteryTime);
127    },
128 
129    //更新抽奖次数
130    freshLottery : function() {
131        this.stopInitAnimate();
132        this.setBtnHover();
133        this.isStop = true;
134        this.lotteryTime = 1;
135        this.freshLotteryTime();
136 
137    },
138 
139    //设置按钮三态
140    setBtnHover : function() {
141        //按钮三态
142        $('#platebtn').hover(function(){
143            $(this).addClass('hover');
144        },function() {
145            $(this).removeClass('hover click');
146        }).mousedown(function(){
147            $(this).addClass('click');
148        }).mouseup(function(){
149            $(this).removeClass('click');
150        });
151    },
152 
153    //获取奖品
154    lottery : function() {
155        this.lotteryIndex = undefined;
156        this.lotteryTime--;
157        this.freshLotteryTime();
158        this.totalFrame = 0;
159        this.curSpeed = this.minSpeed;
160        this.turnAround();
161        this.lotteryIndex = typeof this.lotteryType[2] !== 'undefined' ? this.lotteryType[2] : this.errorIndex;
162        this.lotteryChannel = typeof this.channelList[1] !== 'undefined' ? this.channelList[1] : '';   
163    },
164 
165    //点击抽奖
166    click : function() {
167        //加锁时
168        if(this.isStop == false) {
169            this.showMsg('现在还不能抽奖哦');
170            return;
171        }
172 
173        this.lottery();
174 
175    },
176 
177    //更新当前速度
178    freshSpeed : function() {
179        var totalResistance = this.minResistance + this.curSpeed * this.Cx;
180        var accSpeed = this.accSpeed;
181        var curSpeed = this.curSpeed;
182        if(this.totalFrame >= this.accFrameLen) {
183            accSpeed = 0;
184        }
185        curSpeed = curSpeed - totalResistance + accSpeed;
186 
187        if(curSpeed < this.minSpeed){
188            curSpeed = this.minSpeed;
189        }else if(curSpeed > this.maxSpeed){
190            curSpeed = this.maxSpeed;
191        }
192 
193        this.curSpeed  = curSpeed;
194    },
195 
196    //闪灯,切换到下一张时调用
197    switchLight : function() {
198        this.lightSwitch = this.lightSwitch === 0 ? 1 : 0;
199        var lightHeight = -this.lightSwitch * this.height;
200        this.lightDom.css('backgroundPosition','0 ' + lightHeight.toString() + 'px');  
201    },
202 
203    //旋转,trunAround,changeNext循环调用
204    turnAround : function() {
205        //加锁
206        this.isStop = false;
207        var intervalTime = parseInt(this.virtualDistance/this.curSpeed);       
208        this.timer = window.setTimeout('turnplate.changeNext()', intervalTime);    
209    },
210 
211    //弹出奖品
212    showAwards : function(){
213        $('#lotteryMsg').dialog('open');
214    },
215 
216    //显示提示信息
217    showMsg : function(msg, isFresh) {
218        isFresh = typeof isFresh == 'undefined' ? false : true;
219        if(typeof msg != 'string'){
220            msg = '今天已经抽过奖了，明天再来吧';
221        }
222        var msgBox = this.msgBox;
223        var display = msgBox.css('display');
224 
225        msgBox.html(msg);  
226 
227        window.clearTimeout(this.timer2);
228        msgBox.stop(true,true).show();
229        var fadeOut = $.proxy(function() {
230            this.msgBox.fadeOut('slow');
231        }, this);
232        this.timer2 = window.setTimeout(fadeOut, this.showMsgTime);
233    },
234 
235 
236    //切换到下帧
237    changeNext : function() {
238        //判断是否应该停止
239        if(this.lotteryIndex !== undefined && this.curFrame == this.lotteryIndex && this.curSpeed <= this.minSpeed+10 && this.totalFrame > this.accFrameLen) {
240            this.isStop = true;
241            this.showAwards();
242            return;        
243        }
244 
245        var nextFrame =  this.curFrame+1 < this.frameLen ? this.curFrame+1 : 0;
246        var bgTop = - nextFrame * this.height;     
247        this.turnplateBox.css('backgroundPosition','0 ' + bgTop.toString() + 'px');
248        this.switchLight();
249        this.curFrame = nextFrame;
250        this.totalFrame ++;
251        this.freshSpeed();
252        this.turnAround();
253    }
254}
255 
256</script>
257 
258 
259 
260<script type="text/javascript">
261//登录插件
262(function($){
263    $.fn.login = function(options){
264 
265        settings = {
266                loginUrl: 'account/login/',
267                msgEle: $(this).find('.msg'),
268                loginIdEle: $(this).find('#loginId'),
269                passwordEle: $(this).find('#password')
270        };
271 
272        var ERROR_MSG = {
273            'inputCorrectEmail': '请输入正确的用户名',
274            'inputPassword': '请填写登录密码',
275            'passwordLength': '密码应在6-32位字符内',
276            'noreg': '此账号未注册',
277            'checkemailcode_2':'此账号未注册',
278            'checkemailcode_':'服务器繁忙，请稍后再试',
279            'accountNotMatch': '账号密码不匹配',
280            'serverdown': '服务器维护中',
281            'clientUserBaned': '您的账号被限制登录',
282            'accUserInvalid': '正在对该账号进行绑定处理，暂无法登陆',
283            'userLocked': '帐号锁定中，暂时无法登录',
284            'inviladId': '帐号不存在'
285        }
286 
287        function submit() {
288            var loginId = $.trim(settings.loginIdEle.val()),
289            password = $.trim(settings.passwordEle.val());
290 
291            if(loginId == '') {
292                showMsg('登录名不能为空');
293                return;
294            }
295 
296            if(password == '') {
297                showMsg('密码不能为空');
298                return;
299            }
300 
301            $.post(settings.loginUrl, {'loginId': loginId, 'password': password}, function(data){
302                if(data.status == 'ok') {
303                    location.reload();
304                } else {
305                    if(typeof ERROR_MSG[data.status] == 'string') {
306                        showMsg(ERROR_MSG[data.status]);
307                    } else {
308                        showMsg('服务器维护中');
309                    }
310                }
311            }, 'json');
312        }
313 
314        function showMsg(msg) {
315            settings.msgEle.html(msg);
316        }
317 
318        if(typeof options == 'string'){
319            switch(options) {
320                case 'submit':
321                    submit();
322                    break;
323                default:
324 
325            }      
326        }
327        return $(this);
328 
329    }
330})(jQuery);
331 
332$('#lotteryMsg').dialog({
333    modal: true,
334    width: 500,
335    height: 350,
336    resizable: false,
337    title: '获奖信息',
338    autoOpen: false,
339    open: function(){
340            var showMsg = '您抽中了： ' + turnplate.lotteryList[turnplate.lotteryIndex] /*+ ' (来自:' + turnplate.lotteryChannel + ')'*/;
341            var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
342            $('#lotteryMsg').find('.msg').html(showMsg);
343            $('#lotteryMsg').find('.option').html(options);
344    },
345    buttons: [{
346        text:'发微博领5M空间',
347        click: function() {
348            var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
349            var jumpUrl = "http://www.5imoban.net";
350            window.open(jumpUrl, "top", "width=1024,height=750,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
351            $(this).dialog('close');
352        }
353    }]
354});
355 
356 
357$('#login').dialog({
358    modal: true,
359    width: 350,
360    resizable: false,
361    title: '请先登录',
362    autoOpen: false,
363    open: function(){
364        //监听回车事件
365        $('#login').bind('keydown', function(e){
366            if(e.which == '13'){
367                $('#login').login('submit');
368            }
369        });
370    },
371    close: function(){
372        //取消监听
373        $('#login').unbind('keydown');
374        $('#login #password').val('');
375    },
376    buttons:[{
377        text: '登录',
378        click: function(){
379            $('#login').login('submit');
380        }
381    }]
382});
383 
384turnplate.init();
385</script>
具体怎么设置，上面的参数都已说明。
TAGS: jquery  转盘  抽奖  代码  带跑  马灯  jquery  幸运  大