绚丽的按钮导航（css3）实现

终于搞好了，原来在博客园这里搞这东东这么难，这个是用CSS3实现的，现在只能运行于现代Chrome和firefox浏览器，不能运行于IE，并且在Chrome或者与其相同内核的现代浏览器下才能显示最好的效果。

注意：由于为了在随笔里可以显示效果，做了少许改动！

首先是html代码，十分简单

代码

var cover=document.getElementById("cover");
var tab=document.getElementById("tab");

var coverlis=cover.childNodes;
var tablis=tab.childNodes;
for(var i=coverlis.length-1;i>=0;i--)
{

coverlis[i].onmouseover=function(event){hover(event,coverlis,tablis,"hover");}
coverlis[i].onmouseout=function(event){hover(event,coverlis,tablis,"");}

}

function hover(event,coverlis,tablis,className)
{
var oEvent=(event)?event:window.event;
var oElem;
if(className!=""){
oElem = oEvent.toElement ? oEvent.toElement : oEvent.currentTarget;
}
else
{oElem = oEvent.fromElement ? oEvent.fromElement : oEvent.currentTarget;
}
for(var i=coverlis.length-1;i>=0;i--)
{
if(coverlis[i]==oElem){tablis[i].className=className;}
}

}

贴上来的代码只要稍微改动一下就可以在你们自己的电脑上试试了，因为代码为了在随笔里可以运行，做了一些改动，十分难看。。

javascript

Ajax

Css

html

.net

SQL