<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery微信手机端九宫格抽奖代码特效</title>
<style type="text/css">
#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(img/9.jpg) no-repeat top center;}
#lottery table td a:hover{background-image:url(img/11.jpg);}
#lottery table td.active .mask{display:block;}
.mask{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background-color: rgba(252,211,4,0.5);
display:none;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<br>
<div id="lottery">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="lottery-unit lottery-unit-0"><img src="img/1.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-1"><img src="img/2.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-2"><img src="img/3.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-7"><img src="img/4.jpg"><div class="mask"></div></td>
<td><a href="#"></a></td>
<td class="lottery-unit lottery-unit-3"><img src="img/5.jpg"><div class="mask"></div></td>
</tr>
<tr>
<td class="lottery-unit lottery-unit-6"><img src="img/6.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-5"><img src="img/7.jpg"><div class="mask"></div></td>
<td class="lottery-unit lottery-unit-4"><img src="img/8.jpg"><div class="mask"></div></td>
</tr>
</table>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
var lottery={
index:-1, //当前转动到哪个位置，起点位置
count:0, //总共有多少个位置
timer:0, //setTimeout的ID，用clearTimeout清除
speed:20, //初始转动速度
times:0, //转动次数
cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize:-1, //中奖位置
init:function(id){
if ($("#"+id).find(".lottery-unit").length>0) {
$lottery = $("#"+id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".lottery-unit-"+this.index).addClass("active");
};
},
roll:function(){
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".lottery-unit-"+index).removeClass("active");
index += 1;
if (index>count-1) {
index = 0;
};
$(lottery).find(".lottery-unit-"+index).addClass("active");
this.index=index;
return false;
},
stop:function(index){
this.prize=index;
return false;
}
};
function roll(){
lottery.times += 1;
lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
clearTimeout(lottery.timer);
lottery.prize=-1;
lottery.times=0;
click=false;
}else{
if (lottery.times<lottery.cycle) {
lottery.speed -= 10;
}else if(lottery.times==lottery.cycle) {
var index = Math.random()*(lottery.count)|0;//中奖物品通过一个随机数生成
lottery.prize = index;
}else{
if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
lottery.speed += 110;
}else{
lottery.speed += 20;
}
}
if (lottery.speed<40) {
lottery.speed=40;
};
//console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
lottery.timer = setTimeout(roll,lottery.speed);//循环调用
}
return false;
}
var click=false;
window.onload=function(){
lottery.init('lottery');
$("#lottery a").click(function(){
if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
}else{
lottery.speed=100;
roll(); //转圈过程不响应click事件，会将click置为false
click=true; //一次抽奖完成后，设置click为true，可继续抽奖
return false;
}
});
};
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
jQuery微信手机端九宫格抽奖代码特效.zip
版权申诉
48 浏览量
2023-09-21
00:21:39
上传
评论
收藏 232KB ZIP 举报
jQuery微信手机端九宫格抽奖代码特效.zip （22个子文件） 
js 
jquery-1.11.0.min.js 94KB img 
2.jpg 10KB 6.jpg 11KB 1.jpg 12KB 1 lottery1.jpg 14KB gift1.jpg 15KB gift7.jpg 12KB gift2.jpg 9KB gift6.jpg 12KB gift0.jpg 12KB gift5.jpg 10KB lottery2.jpg 14KB gift3.jpg 10KB gift4.jpg 15KB 5.jpg 10KB 8.jpg 9KB 11.jpg 11KB 3.jpg 11KB 7.jpg 10KB 9.jpg 12KB 4.jpg 7KB
index.html 5KB资源评论
