玩转js--炫酷抽奖轮盘

html文件

	
		
		
		
		
		
	
	
		

			

				

					

					

					

					

					

					

					

				
				

					

					
					

						

							开始抽奖
						    重置
						
						
					
					

					
				
				

					

					

					
					
				
				

					

					

					
				
				

					

					

					

					

					

					

					

				
			
		
		

			
		
	

css问价

*{
	margin: 0;
	padding: 0;
}
body{
	background: url(../img/bg.png);
}

table{
	
	color: white;
	margin: 40px auto 0;
}
/*
 *此处添加浮动的目的是消除img和父容器之间的间隙 
 */
img{
	float: left;
}
table tr td{
	width: 110px;
	height: 110px;
	
}
td.center{
    position: relative;
}

td.center .box{
	width: 300px;
	height: 30px;
	position: absolute;
	bottom: 70px;
	left: 150px;
	
}
.box span{
	display: inline-block;
	width: 120px;
	height: 35px;
	background: rgb(106,38,19);
	line-height: 35px;
	font-family: "微软雅黑";
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	margin-right: 30px;	
	float: left;
	cursor: pointer;
	border-radius: 4px;
	
}
.target{
	width: 114px;
	height: 114px;
	position: absolute;
	top: 0;
	left: 0;
	
}

js文件

$(document).ready(function(){
	init();
	//重置函数，白色框到“谢谢参与”位置
	function init(){
		moveTo(0)
	}
	function moveTo(i){
		//offset()返回目标的位置，包括top和left两个属性
		var offset=$("#"+(i%20)).offset();
		$('div.target').animate({
			top:offset.top-2,
			left:offset.left-2
		},20)
	}
	
	$('span.start').click(function(){
		/*
		 * Math.random()返回0~1之间的随机数
		 * Math.ceil(x)返回大于等于 x，并且与它最接近的整数。
		 */
		var i=Math.random()*20;
		var index=Math.ceil(i)+50;
		for(var i=0;i