当前位置： 代码迷 >> Web前端 >> jquery渐变示范
  详细解决方案

jquery渐变示范

热度：100   发布时间：2012-08-25 10:06:20.0
jquery渐变示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cycle</title>

<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
table.outTable{
		width: 500px;
	 	border-top: #037DC7 1px solid;
	 	border-collapse: collapse;
}	
.outTable td{
 		height:	15px;
	 	border: #037DC7 1px solid;
	 	border-collapse: collapse;
}	

table.inTable{
		border: #037DC7 0px solid;
}
.inTable td.leftSideTd{
	width: 15px;
	height: 100px;
	line-height:100px;
	border-collapse: collapse;
}




</style>

<script type="text/javascript">
	var first = true;
	
	function decrescendo(o) {
			$("#td"+o).css("background-color", "#C2F7A6");
			$("#td"+o).css("opacity", "1.0");
			$("#td"+o).animate({opacity: 0.4}, {duration: 500});
	}
	function crescendo(o) {
			$("#td"+o).css("background-color", "#C2F7A6");
			$("#td"+o).css("opacity", "0");
			$("#td"+o).animate({opacity: 1}, {duration: 500});
	}
	
	function cycle(o){	
		var preO = o - 1;
		if(o == 1) {
				preO = 14;
		}
		//$("#td"+preO).css("background-color", "#FFFFFF");
		if(!first) {
			decrescendo(preO)
		}
		first = false;
		
		var nextO = o + 1;
		if(o == 14) {
				nextO = 1;
		}
		//$("#td"+o).css("background-color", "#C2F7A6");
		crescendo(o)
		
		setTimeout("cycle("+nextO+")", 300);
	}
	
	
			
			
</script>
</head>


<body>
	
	<input type="button" value="begin" onclick="cycle(1);" />
	<br /><br /><br />
	
	
	<div style="margin: 0 auto; align:center;">
		
		
		
		<table class="outTable" align="center">
			<tr>
				<td id="td1"></td>
				<td id="td2"></td>
				<td id="td3"></td>
				<td id="td4"></td>
			</tr>
			<tr>
				<td colspan="2" style="border: 0px;">
						<table align="left" class="inTable">
							<tr>
								<td id="td14" class="leftSideTd" style="border-top: 0;"></td>
							</tr>
							<tr>
								<td id="td13" class="leftSideTd"></td>
							</tr>
							<tr>
								<td id="td12" class="leftSideTd" style="border-bottom: 0;"></td>
							</tr>
							
						</table>
				</td>
				<td colspan="2" style="border: 0px;">
						<table align="right" class="inTable">
							<tr>
								<td id="td5" class="leftSideTd" style="border-top: 0;"></td>
							</tr>
							<tr>
								<td id="td6" class="leftSideTd"></td>
							</tr>
							<tr>
								<td id="td7" class="leftSideTd" style="border-bottom: 0;"></td>
							</tr>
							
						</table>
				</td>
				
			</tr>
			<tr>
				<td id="td11"></td>
				<td id="td10"></td>
				<td id="td9"></td>
				<td id="td8"></td>
			</tr>
		</table>
		
		
		
		
	</div>
	
	
	
	
</body>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.