jquery——九宫格大转盘抽奖实例

 一、用到的图片

二、代码如下，重点是js部分

#lottery{width:570px;height:510px;margin:0px auto;border:4px solid #ba1809;}
#lottery table{background-color:yellow;}
#lottery table td{position:relative;width:190px;height:170px;text-align:center;color:#333;font-index:-999}
#lottery table td img{display:block;width:190px;height:170px;}
#lottery table td a{width:190px;height:170px;display:block;text-decoration:none;background:url(images/lottery1.jpg) no-repeat top center;}
#lottery table td a:hover{background-image:url(images/lottery2.jpg);}
#lottery table td.active .mask{display:block;}
.mask{
  width:100%;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background:url(images/mask.png) no-repeat;
  display:none;
}





  

效果如下：

三、注意事项

1、抽奖过程说明

上面只是前端展示的效果。中奖物品通过一个随机数生成。

var index = Math.random()*(lottery.count)|0;

真正开发中中奖物品是通过向后端接口发送请求返回的。

$("#lottery a").click(function(){
var islogin=checkLogin();
if(islogin){//已登录用户才能去抽奖
  if (click) {
   return false;
 }else{
   //向后端接口发请求返回中奖结果
   var geturl="http://xxxxxx?username="+username+"&token="+token;
    $.ajax({
    　url:geturl,
     type:"GET",
     dataType:"json",
    async:false,
   success:function(data){
if(data.errorcode==0){
var rewardid=data["message"]["rewardid"];
var cardno=data["message"]["rewardCardNo"];
 var passno=data["message"]["rewardCardPass"];
 var prize=-1;
  var content="";
 if(rewardid=="iphone6"){
 lottery.prize=0;
 prize=0;
content="一部iphone6手机";
$("#content1").html(content);
  }else if(rewardid=="PPTVKING"){
  lottery.prize=1;
prize=1;
 content="一部PPTV KING7s 3D影音手机";
 $("#content1").html(content);
  
 }else if(rewardid=="legao"){
lottery.prize=5;
prize=5;
content="一份乐高的玩具";
  $("#content1").html(content);
 }

lottery.speed=100;
roll();
click=true;  
return false;
      }else{

 if(data.errorcode==3){
$("#novip").show();
 }else{
$("#notime").show();
 }
      }
    }
  });
      }
      }
});

2、兼容性说明

.mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片background:url(images/mask.png) no-repeat;

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(252,211,4,0.5);
  display: none
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。