jquery跑马灯抽奖

最新推荐文章于 2024-01-10 18:30:15 发布

啊哈前端

最新推荐文章于 2024-01-10 18:30:15 发布

阅读量875

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/wuzhe128520/article/details/51559407

版权

jquery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!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;
}