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九宫格抽奖效果代码实例就介绍到这了。

回复

我来回复
  • 暂无回复内容