jquery实现九宫格大转盘抽奖功能
本篇内容主要讲解“jquery实现九宫格大转盘抽奖功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery实现九宫格大转盘抽奖功能”吧!
站在用户的角度思考问题,与客户深入沟通,找到道外网站设计与道外网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖道外地区。
一、用到的图片









二、代码如下,重点是js部分
jQuery九宫格大转盘抽奖
效果如下:

三、注意事项
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) no-repeat;
.mask {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(252,211,4,0.5);
display: none
}到此,相信大家对“jquery实现九宫格大转盘抽奖功能”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
新闻标题:jquery实现九宫格大转盘抽奖功能
分享地址:http://www.jxjierui.cn/article/ijochg.html


咨询
建站咨询
