关闭

jquery跑马灯抽奖

133人阅读 评论(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;
}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:48645次
    • 积分:1469
    • 等级:
    • 排名:千里之外
    • 原创:87篇
    • 转载:53篇
    • 译文:0篇
    • 评论:3条