jquery九宫格抽奖

以下是使用jQuery实现九宫格抽奖的示例代码：

HTML代码：

<div class="lottery">
  <ul>
    <li><a href="#"><img src="img/1.png"></a></li>
    <li><a href="#"><img src="img/2.png"></a></li>
    <li><a href="#"><img src="img/3.png"></a></li>
    <li><a href="#"><img src="img/4.png"></a></li>
    <li><a href="#"><img src="img/5.png"></a></li>
    <li><a href="#"><img src="img/6.png"></a></li>
    <li><a href="#"><img src="img/7.png"></a></li>
    <li><a href="#"><img src="img/8.png"></a></li>
    <li><a href="#"><img src="img/9.png"></a></li>
  </ul>
  <a href="#" class="btn">开始抽奖</a>
</div>

CSS代码：

.lottery {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}
.lottery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.lottery ul li {
  float: left;
  margin-right: 10px;
}
.lottery ul li:last-child {
  margin-right: 0;
}
.lottery ul li a {
  display: block;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 150px;
  font-size: 24px;
  color: #333;
  text-decoration: none;
}
.lottery ul li a img {
  max-width: 100%;
  max-height: 100%;
}
.lottery .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 24px;
  color: #fff;
  background-color: #f00;
  border-radius: 5px;
  text-decoration: none;
}

JavaScript代码：

$(function() {
  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();
    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;
      }
      lottery.timer = setTimeout(roll, lottery.speed);
    }
    return false;
  }

  var click = false;

  $(document).ready(function() {
    lottery.init('lottery');
    $(".btn").click(function() {
      if (click) {
        return false;
      } else {
        lottery.speed = 100;
        roll();
        click = true;
        return false;
      }
    });
  });
});