您的位置：首页 > Web前端 > JQuery

jquery跑马灯抽奖

2016-06-01 21:53 351 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>抽奖</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<table id="game">
<tbody>
<tr>
<td id="0">
<img src="images/0.jpg"></td>
<td  id="1">
<img src="images/19.jpg">
</td>
<td  id="2">
<img src="images/1.jpg">
</td>
<td  id="3">
<img src="images/2.jpg">
</td>
<td  id="4">
<img src="images/3.jpg">
</td>
<td  id="5">
<img src="images/4.jpg">
</td>
<td  id="6">
<img src="images/5.jpg">
</td>
</tr>
<tr>
<td id="19">
<img src="images/6.jpg">
</td>
<td colspan="5" rowspan="3" class="centerImg">
<button class="start" id="begingame">开始抽奖</button>
<button class="reset">
重置
</button>
</td>
<td id="7">
<img src="images/7.jpg">
</td>
</tr>
<tr>
<td id="18">
<img src="images/8.jpg"></td>
<td id="8">
<img src="images/9.jpg">
</td>
</tr>
<tr>
<td id="17">
<img src="images/10.jpg">
</td>
<td id="9">
<img src="images/11.jpg">
</td>
</tr>
<tr>
<td id="16">
<img src="images/12.jpg">
</td>
<td id="15">
<img src="images/13.jpg">
</td>
<td id="14">
<img src="images/14.jpg">
</td>
<td id="13">
<img src="images/15.jpg">
</td>
<td id="12">
<img src="images/16.jpg">
</td>
<td id="11">
<img src="images/17.jpg">
</td>
<td id="10">
<img src="images/18.jpg">
</td>
</tr>
</tbody>
</table>
<div class="bingo" id="bingo"></div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var lastobj=null,
loop=null,
howcicle=0;
$(function(){
var firsttd=$("#game").find("td").eq(0);
lastobj=firsttd;
binggouposition(firsttd)
$(window).resize(function(){
binggouposition(lastobj);
});
$("#begingame").click(function(){
move(100);
});
});
function getOffset ($obj){
var current=$obj.offset(),
top=current.top,
left=current.left,
offset={
left: left,
top: top
};
return offset;
}
function binggouposition(curtr) {
offsetobj=getOffset (curtr);
$("#bingo").css({"left": offsetobj.left,"top": offsetobj.top});
}
function move(speed){
var randomcircle=60+Math.random(10)*20;
loop=setInterval(function(){
var position=getOffset($("#"+howcicle%20));
$("#bingo").css({"top": position.top,"left": position.left});
howcicle++;
if(howcicle>=randomcircle){
stop();
howcicle=howcicle%20;
console.log(howcicle);
lastobj=$("#"+(howcicle-1));
}
},speed);
}
function stop(){
clearInterval(loop);
}
</script>
</body>
</html>

以下是css代码：

* {
margin: 0;
padding: 0;
}
body {
font: 12px/1.4 'microsoft yahei';
}
table {
min-width: 776px;
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
}
table tr td.centerImg {
background: url(../images/center.jpg) no-repeat center center;
text-align: center;
}
table tr td.centerImg button {
background: #6a2613;
color: #fff;
width: 150px;
height: 40px;
line-height: 40px;
border-radius: 3px;
border: none;
position: relative;
top: 100px;
}
table tr td.centerImg button:hover {
background: #481305;
}
table td {
width: 110px;
height: 110px;
border: 1px solid #000;
}
img {
border: 0;
display: block;
width: 100%;
height: 100%;
}
.bingo {
background: url(../images/target.png) no-repeat center center;
width: 110px;
height: 110px;
position: absolute;
top: 0;
left: 0;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航