jquery渐变示例

wzt7576 · 发表于 2013-1-29 08:45:04

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

		自动登录	找回密码
密码			立即注册