jquery跑马灯抽奖

原创 2016年06月01日 21:53:00
<!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;
}


版权声明: 千里之行,始于足下!

相关文章推荐

js抽奖程序(跑马灯效果)

显示效果图: 12345 166 157 148 131211109 ...

微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)

基本实现功能 1,小程序仿天猫超市抽奖大转盘 2,跑马灯效果 3,开始抽奖,抽奖完成后有弹窗

跑马灯抽奖

  • 2017-07-27 12:18
  • 37KB
  • 下载

jQuery的animate运用实例(安卓组的跑马灯替换之道)

所谓安卓组的跑马灯,就是指安卓端有一个插件,该插件用于滚动展示某个班级或者学校的通知,其主要功能也就是我jQuery实现的主要功能是滚动展示通知,其中,标题若过长,则横向(从右向左)滚动,内容若过长,...

Jquery写的跑马灯效果

  • 2012-03-14 23:10
  • 727KB
  • 下载

jquery跑马灯示例

  • 2011-06-23 09:54
  • 12KB
  • 下载

JQuery 公告滚动(跑马灯特效)

一.公告向左滚动 html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .notice...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)