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

本篇文章主要介绍了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-600) no-repeat top center;} #lottery table td a:hover{background-image:url(images/lottery2.jpg-600);} #lottery table td.active .mask{display:block;} .mask{ width:100%; height:100%; position:absolute; left:0; top:0; background:url(images/mask.png-600) 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(); } } }/*function结束*/ });/*ajax结束*/ }/*else结束*/ } }); 

2、兼容性说明

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

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

以上就是jquery――九宫格大转盘抽奖实例的详细内容，更多请关注本站其它相关文章！