基于jQuery大转盘抽奖特效代码

基于jQuery大转盘抽奖特效代码

基于jQuery点击抽奖缩略图弹出抽奖转盘特效代码。

使用方法
需要用到的JS代码文件

1
2
<script src="js/jquery.min.js"></script>
<script src="event.js"></script>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
*{margin:0; padding:0;}
.luckDrawIco{position:fixed; left:20px; bottom:40px; cursor:pointer;}
.bodyBg{position:fixed; background-color:rgba(0,0,0,0.5); z-index:9;}
.wrapper{position:fixed; z-index:10;}
.wrapper .close{position:absolute; right:106px; top:-33px; width:37px; height:64px; cursor:pointer;}
.wrapper .ribbon{position:absolute; left:50%; bottom:-12px; margin-left:-166px; width:360px; height:67px; line-height:67px; background:url(luckDraw/ribbon.png) no-repeat; color:#e40600; font-size:22px; text-align:center; z-index:20;}
.wrapper .box{position:absolute; left:69px; top:30px; width:386px; height:386px;}
.wrapper .luckDraw-btn{position:absolute; left:189px; top:112px; width:146px; height:185px; cursor:pointer;}
.prize-box{position:fixed; width:502px; height:432px; background-image:url(luckDraw/tk_img.png); z-index:9999}
#prize-cont{width:140px; height:100px; margin:100px 0 0 185px; font-size:20px; color:#b01a1c; font-weight:700;}
.prize-box .prize-a{display:inline-block; width:220px; height:60px; margin:170px 0 0 150px;}
.prize-box .prizeBox-close{position:absolute; right:136px; top:-31px; width:37px; height:64px; cursor:pointer;}

AJAX代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//通过AJAX从后台传数据,获取奖品
       /* $.ajax({
           type:"post",//请求方式
           url:"/",//请求地址
           dataType:"json",//响应数据类型
           success:function(data){
               var index = data.prize;
               var degNum;//通过角度获取奖品顺时针,45度一个奖品
               if(index==1){
                   degNum=248;
               }else if(index==2){
                   degNum=248;
               }else if(index==3){
                   degNum=248;
               }else if(index==4){
                   degNum=248;
               }else if(index==5){
                   degNum=248;
               }else if(index==6){
                   degNum=248;
               }else if(index==7){
                   degNum=248;
               }else if(index==8){
                   degNum=248;
               }
               if(!$this.isDoing) {
                   goRotate(degNum);//调用
                   isDoing = true;//ture阻止连续点击抽奖
               }
           },
           error:function(){
              alert('服务器连接失败,请稍后再试!');
           }
       })*/

 
//对应奖品
function renderCbFun(deg) {
   var str = '';
   if (deg >= 0 && deg < 45) {
       str = '1000美元现金券';
   } else if (deg >= 45 && deg < 90) {
       str = '5000美元现金券';
   } else if (deg >= 90 && deg < 135) {
       str = '20美金抵现券';
   } else if (deg >= 135 && deg < 180) {
       str = '500美元现金券';
   } else if (deg >= 180 && deg < 225) {
       str = '8美元抵现券';
   } else if (deg >= 225 && deg < 270) {
       str = 'iPhone XS Max';
   } else if (deg >= 270 && deg < 315) {
       str = '10美元抵现?';
   } else if (deg >= 315 && deg < 360) {
       str = '2000美金现金券';
   }
}
 
//创建转盘随机角度(测试时使用)
function clickCbFun(deg) {
   var random = Math.floor(Math.random() * 360);//获取随机角度
   goRotate(random);
}
当前内容只有登录了才能查看,如果您已经注册,请登录
18

发表评论