特效描述:jQuery动画 扭蛋机抽奖。jQuery动画扭蛋机抽奖代码
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
100/次10000
>
恭喜你!
获得一等奖!
恭喜你!
获得二等奖!
恭喜你!
获得三等奖!
咦?没有抽中?
对不起,积分不足!
$(document).ready(function(e) {
//一等奖 关闭
$("#jianpin_one em img").click(function(){
$("#jianpin_one").hide();
}
);
//二等奖 关闭
$("#jianpin_two em img").click(function(){
$("#jianpin_two").hide();
}
);
//三等奖 关闭
$("#jianpin_three em img").click(function(){
$("#jianpin_three").hide();
}
);
//没有中奖 关闭
$("#jianpin_kong em img").click(function(){
$("#jianpin_kong").hide();
}
);
//积分不足 关闭
$("#no_jifeng em img").click(function(){
$("#no_jifeng").hide();
}
);
var score=470;
$(".wdjifen").html(score);
$(".game_go").click(function(){
score-=100;
if(score<0){
for(i=1;i<=11;i++){
$(".qiu_"+i).removeClass("wieyi_"+i);
}
$("#no_jifeng").show();
}else{
draw()
}
});
function draw(){
var number =Math.floor(4*Math.random()+1);
for(i=1;i<=11;i++){
$(".qiu_"+i).removeClass("diaol_"+i);
$(".qiu_"+i).addClass("wieyi_"+i);
};
setTimeout(function (){
for(i=1;i<=11;i++){
$(".qiu_"+i).removeClass("wieyi_"+i);
}
},1100);
setTimeout(function(){
switch(number){
case 1:$(".zjdl").children("span").addClass("diaL_one");break;
case 2:$(".zjdl").children("span").addClass("diaL_two");break;
case 3:$(".zjdl").children("span").addClass("diaL_three");break;
case 4:$(".zjdl").children("span").addClass("diaL_four");break;
}
$(".zjdl").removeClass("none").addClass("dila_Y");
setTimeout(function (){
switch(number){
case 1:$("#jianpin_one").show();break;
case 2:$("#jianpin_two").show();break;
case 3:$("#jianpin_three").show();break;
case 4:$("#jianpin_kong").show();break;
}
},900);
},1100)
//取消动画
setTimeout(function (){
$(".zjdl").addClass("none").removeClass("dila_Y");
$(".wdjifen").html(score);
$(".zjdl").children("span").removeAttr('class');
},2500)
}
});