動感的炫彩導航菜單代碼

2024-09-05 12:19:15

字體：大中小

來源：轉載

供稿：網友

動感的炫彩導航菜單代碼，用JS控制顏色變換，鼠標放上去會有漸變效果，像一個FLASH菜單一樣，很漂亮。

<html><head><style>/* 先把這個 xmenu 的樣式放到css里 */.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#f5f5f5;border:1px solid #0066cc;background:#0066cc;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}</style><script>function attachXMenu(objid){	var tds=objid.getElementsByTagName('td');	for(var i=0;i<tds.length;i++){		with(tds[i]){			onmouseover=function(){				with(this){					filters[0].apply();					style.background='#FEBD20'; //這是鼠標移上去時的背景顏色					style.border='1px solid #ffffff'; //邊框					style.color='black'; //文字顏色					filters[0].play();				}			}			onmouseout=function(){				with(this){					filters[0].apply();					style.background='#336699'; //鼠標離開時的背景顏色					style.border='1px solid #336699'; //邊框顏色					style.color='#ffffff'; //文字顏色					filters[0].play();				}			}		}	}}</script><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>炫彩變色菜單</title></head><body><table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="2" border="0" bgcolor="#003366" align="center">	<tr>		<td>廣告特效</td>		<td><font color="#FFFFFF">圖片特效</font></td>		<td>CSS特效</td>		<td>網頁特效</td>		<td>網頁布局</td>		<td>綜合代碼</td>	</tr></table><script>attachXMenu(xmenu0); //動作綁定,xmenu0就是table的id</script></body></html>

上一篇：一個很實用的下拉導航條代碼

下一篇：帶漸變效果的變色導航菜單