写文章

jQuery九宫格抽奖效果代码实例

快乐打工仔 分类：实例代码

jQuery九宫格抽奖效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。

分享一段代码实例，它实现了九宫格抽奖效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
img {
  width: 20px;
  height: 16px;
}
.active {
  border: red 1px solid;
  background: red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var width = 8;
var height = 8;
var dirs = ["left", "right", "up", "down"]
var dir = {
  left: function (x, y) {
    return {
      x: x == 0 ? width - 1 : x - 1,
      y: y
    }
  },
  right: function (x, y) {
    return {
      x: x == width - 1 ? 0 : x + 1,
      y: y
    }
  },
  up: function (x, y) {
    return {
      x: x,
      y: y == 0 ? height - 1 : y - 1,
    }
  },
  down: function (x, y) {
    return {
      x: x,
      y: y == height - 1 ? 0 : y + 1,
    }
  }
}
var times = ((Math.random() * 500) >>> 0) + 50;
var pos = {
  x: (Math.random() * width) >>> 0,
  y: (Math.random() * height) >>> 0,
}
function next(i) {
  $("tr:nth-child(" + (pos.x + 1) + ") td:nth-child(" + (pos.y + 1) + ")").removeClass("active");
  pos = dir[dirs[(Math.random() * 4) >>> 0]](pos.x, pos.y);
  $("tr:nth-child(" + (pos.x + 1) + ") td:nth-child(" + (pos.y + 1) + ")").addClass("active");
  if (times-- < 0) {
    return;
  }
  setTimeout(next, i - 1);
}
window.onload = function () {
  next(50);
} 
</script>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
  <tr>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
    <td><img src="" alt="" /></td>
  </tr>
</table>
</body>
</html>

jQuery九宫格抽奖效果代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery九宫格抽奖效果代码实例就介绍到这了。

回复

我来回复

  • 暂无回复内容