<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>九宫格抽奖</title>
<style type="text/css">
*{padding: 0;margin: 0;}
li{ list-style-type: none;}
a{text-decoration: none;}
#boxDom{ 684px; height: 684px; background:url(imgs/bg.jpg) no-repeat center;margin:20px auto; position: relative;}
#boxDom ul{ padding: 50px 55px;}
#boxDom ul li{ 142px; height: 142px; float: left;}
#boxDom ul li.check{ background: red}
#clicks{ position: absolute; left:197px; top: 192px; 284px; height: 284px;}
</style>
</head>
<div id="boxDom">
<a id="clicks" href="#"></a>
<ul>
<li class="tt tt-0"><img src="imgs/1.png"/></li>
<li class="tt tt-1"><img src="imgs/4.png"/></li>
<li class="tt tt-2"><img src="imgs/3.png"/></li>
<li class="tt tt-3"><img src="imgs/3.png"/></li>
<li class="tt tt-11"><img src="imgs/7.png"/></li>
<li></li><li></li>
<li class="tt tt-4"><img src="imgs/8.png"/></li>
<li class="tt tt-10"><img src="imgs/4.png"/></li>
<li></li><li></li>
<li class="tt tt-5"><img src="imgs/3.png"/></li>
<li class="tt tt-9"><img src="imgs/5.png"/></li>
<li class="tt tt-8"><img src="imgs/6.png"/></li>
<li class="tt tt-7"><img src="imgs/3.png"/></li>
<li class="tt tt-6"><img src="imgs/4.png"/></li>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var nine = {
form:-1,//起始位置
check:-1,//终点位置，中奖的位置
cont:0,// 奖品的总个数
speed:100,//滚动的速度
min:50,//滚动的最小次数
cycle:0,//滚动的次数
timer:0,//定时器
init: function(obj){
this.obj = $(obj);
this.cont = $(obj).find(".tt").length;
},
//默认设置改变样式
roll:function(){
var form = this.form,obj = this.obj,cont = this.cont;
//删除前一个元素的样式
obj.find(".tt-"+form).removeClass("check");
form += 1;
if(form>=cont){
form = 0;
}
//元素添加类样式
obj.find(".tt-"+form).addClass("check");
this.form = form;
},
start:function(){
/*逻辑：
1.改变滚动的次数
判断： 中奖：满足条件(每次其实都中奖，只是得到东西未知数)
a.起始位置（form） == 中奖位置（check） && 滚动次数 （cycle）> 最小滚动次数（min）
b.清除定时器
未中奖：满足条件
1: 当滚动的次数 小于 最小滚动的次数的时候
控制滚动的速度 变快
2：当滚动的次数 等于 最小滚动的次数的时候
check = 需要来设定中奖的位置（随机）
3：当滚动的次数 大于 最小滚动的次数的时候
控制滚动的速度 变慢
添加定时器
*/
this.cycle++;
this.roll();
//中奖的时候，停止并数据初始化
if( this.form == this.check && this.cycle > this.min+10 ){
//上面加10的作用防止后面的停下来的是后突然停止
//清除定时器，重置样式
clearTimeout(this.timer);
this.check = -1;
this.cycle = 0;
this.speed = 100;
flag = true;
}else{
//当滚动的次数 小于 最小滚动的次数的时候
if(this.cycle < this.min){
//控制速度
this.speed -= 10;
if(this.speed<40)this.speed = 40;
//当滚动的次数 等于 最小滚动的次数的时候
}else if(this.cycle == this.min){
//随机获取中奖的位置 0-11
var index = Math.floor(Math.random()*this.cont);
this.check = index;
//当滚动的次数 大于 最小滚动的次数的时候
}else{
// 多加10 是为了给一个缓冲期
if(this.cycle < this.min + 10){
this.speed += 20;
}else{
this.speed += 60;
}
}
//添加定时器
this.timer = setTimeout(function(){
nine.start();
},this.speed)
}
}
};
var flag = true;
if(flag){
$("#clicks").on("click",function(){
nine.init( $("#boxDom") );
nine.start();
flag = false;
});
}
</script>
</html>