Heim > Web-Frontend > js-Tutorial > js右键菜单效果代码_导航菜单

js右键菜单效果代码_导航菜单

WBOY
Freigeben: 2016-05-16 19:11:18
Original
1166 Leute haben es durchsucht

将以下代码添加到

与之间 
---------------------------------- 


<script> <BR>/*******以下内容可以修改***************/ <BR>var mname=new Array( <BR>"首 页", <BR>"修 改", <BR>"下 载", <BR>"删 除", <BR>"新 建", <BR>"刷 新" <BR>); <BR>//mname是菜单对应的名称,数组的个数必须与下面murl对应 <br><br>var murl=new Array( <BR>"window.open('http://www.cn5.cn','_blank','');", <BR>"alert('修改');", <BR>"alert('download');", <BR>"alert('delete');", <BR>"alert('new');", <BR>"alert('refresh');" <BR>); <BR>//murl是菜单对应的操作,可以是任意javascript代码但是要注意不要在里面输入\",只能用' <BR>//如果要实现跳转可以这样window.location='url'; <BR>var ph=18,mwidth=50;//每条选项的高度,菜单的总宽度 <BR>var bgc="#eee",txc="black";//菜单没有选中的背景色和文字色 <BR>var cbgc="darkblue",ctxc="white";//菜单选中的选项背景色和文字色 <br><br>/****************以下代码请不要修改******************/ <BR>var mover="this.style.background='"+cbgc+"';this.style.color='"+ctxc+"';" <BR>var mout="this.style.background='"+bgc+"';this.style.color='"+txc+"';" <br><br>document.oncontextmenu=function() <BR>{ <BR> mlay.style.display=""; <BR> mlay.style.pixelTop=event.clientY; <BR> mlay.style.pixelLeft=event.clientX; <BR> return false; <BR>} <BR>function showoff() <BR>{ <BR> mlay.style.display="none"; <BR>} <br><br>function fresh() <BR>{ <BR> mlay.style.background=bgc; <BR> mlay.style.color=txc; <BR> mlay.style.width=mwidth; <BR> mlay.style.height=mname.length*ph; <BR> var h="<table width=100% height="+mname.length*ph+"px cellpadding=0 cellspacing=0 border=0>"; <BR> var i=0; <BR> for(i=0;i<mname.length;i++) <BR> { <BR> h+="<tr align=center height="+ph+" onclick=\""+murl[i]+"\" onMouseover=\""+mover+"\" onMouseout=\""+mout+"\"><td style='font-size:9pt;'>"+mname[i]+""; <BR> } <BR> h+=""; <BR> mlay.innerHTML=h; <BR>} <BR></script> 

---------------------------------- 
将以下代码替换标签 
---------------------------------- 

---------------------------------- 
在与之间插入以下代码 
---------------------------------- 

---------------------------------- 
完!!! 
:) 
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage