jquery渐变示例

最新推荐文章于 2024-07-14 23:44:12 发布

wztwzt7576

最新推荐文章于 2024-07-14 23:44:12 发布

阅读量102

点赞数

分类专栏： javascript web页面文章标签： javascript jquery ViewUI

web页面同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

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

wztwzt7576

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery渐变示例

[code="java"]Cycletable.outTable{ width: 500px; border-top: #037DC7 1px solid; border-collapse: collapse;} .outTable td{ height: 15px; border: #037DC7 1px soli...
复制链接

扫一扫