X-Menu 动感导航菜单

2024-09-05 12:19:23

字体：大中小

来源：转载

供稿：网友

X-Menu 动感导航菜单，效果很好。像FLASH动画一样，有兴趣的朋友好好研究一下。

<html><head><title>X-Menu</title><style>.b{color=#000066;cursor:hand}.menu {font-family:Arial;cursor:Default;font-size:12px;border:1px #000000 solid;border-collapse: collapse;filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)       progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);}.ht{font-weight:bold}</style><script>function CoolMenuControl(){this.lastScrollX=0;this.lastScrollY=0;this.lastScrollW=0;this.lastScrollH=0;this.td_X=0;this.td_Y=0;this.td_W=0;this.td_H=0;this.td=0;this.mouseon=0;this.current=nullthis.hk_name;this.hktable_name;this.menudiv_name;this.menutable_name;this.ml=0;this.menuarray=new Array();this.speed;this.href="";//-----菜单项目---function menuitem(type,value,url,target){this.type=typethis.value=valuethis.url=urlthis.target=target}//插入菜单---this.insertmenu=function(type,value,url,target){ this.menuarray[this.menuarray.length]=new menuitem(type,value,url,target)}//初试化---this.init=function(name,bdc,bgc,speed,Alpha){ var inhtml=""var cellcount=0var lastcellcount=0this.hk_name=name+"hk"this.hktable_name=name+"hktable"this.menudiv_name=name+"menudiv"this.menutable_name=name+"menutable"this.speed=speedfor (i=0;i<this.menuarray.length;i++)  {   if (this.menuarray[i].type=="2") cellcount=cellcount+1   if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0}   if (lastcellcount<cellcount) {lastcellcount++}         }stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgcsuspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>"            +"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>"             +"<tr><td height='18' style='"+stylecode+"'></td></tr></table></div>";document.write(suspendcode);var fcell=truefor (i=0;i<this.menuarray.length;i++){  switch(this.menuarray[i].type)   {   case "0":   t=cellcount*2   if (t<=0)    {   inhtml+='<tr><td colspan=2 class=ht onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value   }   else   {   inhtml+='<tr><td colspan='+t+' class=ht onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value   }   fcell=true   break;   case "1":   t=(cellcount-1)*2    if (t<=0)    {   inhtml+='<tr><td width=6><td onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value   }   else   {   inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value   }   fcell=true   break;      case "2":   if (fcell)    {     inhtml+='<tr><td width=6><td onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value;     fcell=false    }   else    {     inhtml+='<td width=6><td onmouseover=/''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"/'>'+this.menuarray[i].value;    }   break;   }}inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">'        +'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">'        +inhtml        +'</table></div>';//alert(inhtml)document.write(inhtml);this.lastScrollX=0;this.lastScrollY=-4;this.posXY(eval(this.menutable_name).cells[0])this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6 this.td_H=eval(this.menutable_name).cells[0].scrollHeightsetInterval(name+".scrollback()",1)}//-----单击超连接---this.doClick=function(){ //alert(this.url) var url=this.href.split(",") //alert(url[0]) //alert(url[1])if (url[0]=="") returnif (url[1]=="_blank")    {window.open(url[0])} else    {location.href=url[0]}}//-----滑动处理---this.scrollback=function(){diffX=this.td_X-3diffY=this.td_Y-5diffW=this.td_WdiffH=this.td_HpercentX=this.speed*(diffX-this.lastScrollX);percentY=this.speed*(diffY-this.lastScrollY);percentW=this.speed*(diffW-this.lastScrollW);percentH=this.speed*(diffH-this.lastScrollH);if(percentX>0)percentX=Math.ceil(percentX);else percentX=Math.floor(percentX);if(percentY>0)percentY=Math.ceil(percentY);else percentY=Math.floor(percentY);if(percentW>0)percentW=Math.ceil(percentW);else percentW=Math.floor(percentW);if(percentH>0)percentH=Math.ceil(percentH);else percentH=Math.floor(percentH);eval(this.hk_name).style.pixelTop+=percentY;eval(this.hk_name).style.pixelLeft+=percentX;eval(this.hktable_name).style.pixelWidth+=percentW;eval(this.hktable_name).style.pixelHeight+=percentH;this.lastScrollX=this.lastScrollX+percentX;this.lastScrollY=this.lastScrollY+percentY;this.lastScrollW=this.lastScrollW+percentW;this.lastScrollH=this.lastScrollH+percentH;}//-----滑出---this.doOver=function() {      if (event.srcElement.tagName=="TD") {      if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return      this.posXY(event.srcElement)      this.td_W=event.srcElement.scrollWidth+6        this.td_H=event.srcElement.scrollHeight        }}//-----绝对定位---this.posXY=function(obj){    hk_left=obj.offsetLeft    hk_top=obj.offsetTop    vParent = obj.offsetParent;          while (vParent.tagName.toUpperCase() != "BODY")	   {		hk_left += vParent.offsetLeft;		hk_top += vParent.offsetTop;		vParent = vParent.offsetParent;       }          this.td_X=hk_left    this.td_Y=hk_top}//-----关于---this.about=function(){alert("OK")}}</script><script language="javascript">var CoolMenu1=new CoolMenuControl()var CoolMenu2=new CoolMenuControl()var CoolMenu3=new CoolMenuControl()var about=new Array()about[0]="关于X-Menu菜单/n/nAuthor:PuterJam/nCopyright 2004/n转载请通知本人"about[1]="关于作者QQ:10644570/nE-Mail:PuterJam@etang.com"</script></head><body><script>CoolMenu1.insertmenu("0","欢迎使用X-Menu (菜单演示)<br>  <font style='font-weight:lighter;'>Made By PuterJam</font>","","")CoolMenu1.insertmenu("0"," ","http://www.baidu.com/","_blank")CoolMenu2.insertmenu("0","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 横向菜单","","")CoolMenu2.insertmenu("2","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 源码爱好者","/","_blank")CoolMenu2.insertmenu("2","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 最新更新","http://cn.yahoo.com/","_blank")CoolMenu2.insertmenu("2","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 站长博客","/","_blank")CoolMenu2.insertmenu("2","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 更新排行","/","_blank")CoolMenu2.insertmenu("2","<img src=http://www.aspku.com/jscss/demoimg/200903/arrow.gif> 源码下载","/","_blank")CoolMenu3.insertmenu("0","<img src=/d/file/p/2024/09-05/357df1f1e7c8e091c23047ec63a84012.gif width=148 height=50>","","")CoolMenu3.insertmenu("0","<img src=http://www.aspku.com/jscss/demoimg/200903/sds.gif> X-Menu简介 ","/","_blank")CoolMenu3.insertmenu("1","关于菜单","javascript:alert(about[0])","")CoolMenu3.insertmenu("1","关于作者","javascript:alert(about[1])","")CoolMenu3.insertmenu("1","联系我吧","mailto:PuterJam@etang.com","")CoolMenu3.insertmenu("1","浏览器版本","javascript:alert(navigator.appName)","")</script><script>CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15)</script><script>CoolMenu2.init("CoolMenu2","#002000","#00FF80",0.2,10)</script><script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script></body></html>

上一篇：QQ网站的选项卡、滑动门菜单

下一篇：纯CSS Tabs选项卡示例