<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 大富翁 </title>
<style>
ul {list-style: none; }
.lottery { position: relative; width: 184px; height: 184px; line-height: 58px; text-align: center; overflow: hidden; margin: 0 auto; }
.lottery li, .lottery .btn { position: absolute; width: 60px; height: 60px; border: 1px #ccc solid; z-index: 1; }
.lottery .item-1 { top: 0; left: 0; }
.lottery .item-2 { top: 0; left: 61px; }
.lottery .item-3 { top: 0; left: 122px; }
.lottery .item-4 { top: 61px; left: 122px; }
.lottery .item-5 { top: 122px; left: 122px; }
.lottery .item-6 { top: 122px; left: 61px; }
.lottery .item-7 { top: 122px; left: 0; }
.lottery .item-8 { top: 61px; left: 0; }
.lottery .active { border-color: red; z-index: 2; }
.lottery .btn { width: 62px; height: 62px; top: 61px; left: 61px; background-color: transparent; cursor: pointer; }
</style>
</head>
<body>
<div class="lottery">
<ul class="list">
<li class="item-1 active">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
<li class="item-4">4</li>
<li class="item-5">5</li>
<li class="item-6">6</li>
<li class="item-7">7</li>
<li class="item-8">8</li>
</ul>
<button class="btn">抽奖</button>
</div>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
// 假设iEnd是请求获得的奖品结果
var iEnd = -1;
$('.btn').on('click', function(){
var $this = $(this);
// 这个setTimeout是假设的请求
setTimeout(function(){
iEnd = Math.floor(Math.random() * 8);
console.log(iEnd);
}, 3000);
// 禁用
$this.attr('disabled', 'disabled');
draw($('.lottery'), function(){
// 第一个奖品是0哦~
alert('您中到了奖品号下标是：'+ iEnd + '，奖品数字是：'+ (iEnd + 1));
// 恢复按钮
$this.removeAttr('disabled');
});
});
// 开始转动
function draw(oMain, fn){
var timer = null,
iNow = oMain.find('.active').index(),
len = oMain.find('li').length,
circle = 5, // 至少要转几圈
iSpeed = 300,
count = 0, // 转了多少次
iLast = len; // 最后一次转圈圈
(function run(){
// 前3个加速
if(count > 2){ iSpeed = 100; }
// 后3个减速
if(iLast < 2){ iSpeed = 300; }
iNow++;
count++;
if(iNow >= len){ iNow = 0; circle--; }
oMain.find('li').removeClass('active').eq(iNow).addClass('active');
timer = setTimeout(run, iSpeed);
// 得到结果
if(iEnd !== -1 && circle <= 0 && iNow == iEnd){
// 为了最后一圈减速，再跑一圈
iLast--;
if(iLast == 0){
clearTimeout(timer);
fn();
}
}
})();
}
</script>
</body>
</html>
