XP右键菜单(可以设置动画效果)

2005-12-15 14:33:57

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>XP右键菜单</title> <script> //---------这段代码可以放在一个js文件里方便导入------------- // 菜单初试化 var MenuItem="" var strMenu var sp=true //使用特效设置,false表示不是用特效 var ts=6 //添加菜单项目 function addmenu(type,caption,url,target,icon) { if (!icon) iconpath="attachments/month_0406/vsjz_blank.gif";//默认图标路径 else iconpath=icon switch(type) { case 0: if (!target) { MenuItem+="<tr height=24><td><td class=loseitems onClick=\"javascript:location.href='"+url+"'\" background="+iconpath+">"+caption+"<td>" } else { if (target=='_blank') { MenuItem+="<tr height=24><td><td class=loseitems onClick=\"javascript:window.open('"+url+"')\" background="+iconpath+">"+caption+"<td>" } else { MenuItem+="<tr height=24><td><td class=loseitems onClick=\"javascript:"+target+".location.href='"+url+"'\" background="+iconpath+">"+caption+"<td>" } } break; case 1: MenuItem+="<tr height=24><td><td class=loseitems onClick=\"javascript:"+url+"\" background="+iconpath+">"+caption+"<td>" break; case 2: MenuItem+="<tr><td><td align=right colspan=2><hr>" break; } } //建立菜单 function buildmenu(){ strMenu = "<div id=\"menu\" class=\"clsMenu\">" strMenu +="<table border=0 cellspacing=0 width=100% cellpadding=0 onMouseover=\"highlight()\" onMouseout=\"lowlight()\"><tr height=1><td width=1><td><td width=1>" strMenu +=MenuItem strMenu += "<tr height=1><td><td><td></table>" strMenu += "</div>" if (isie()) document.write (strMenu); document.oncontextmenu= showmenu document.body.onclick= hidemenu } // 判断客户端浏览器 function isie() { if (navigator.appName=="Microsoft Internet Explorer") { return true; } else { return false; }} // 显示菜单 function showmenu(){ if (isie()){ var redge=document.body.clientWidth-event.clientX var bedge=document.body.clientHeight-event.clientY if (redge<menu.offsetWidth) menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth else menu.style.left=document.body.scrollLeft+event.clientX if (bedge<menu.offsetHeight) menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight else menu.style.top=document.body.scrollTop+event.clientY menu.style.visibility="visible" } return false } // 隐藏菜单 function hidemenu(){ if (isie()) menu.style.visibility="hidden" } // 菜单项获得焦点时加亮显示 function highlight(){ if (event.srcElement.className=="loseitems"){  if (sp) {event.srcElement.style.filter="revealTrans(duration=.1)" ;event.srcElement.filters[0].transition=ts} if (sp) event.srcElement.filters[0].apply(); event.srcElement.className="menuitems" if (sp) event.srcElement.filters[0].play(); } } // 菜单项失去焦点 function lowlight(){ if (event.srcElement.className=="menuitems"){ if (sp) event.srcElement.style.filter="blendtrans(duration=.15)" ; if (sp) event.srcElement.filters[0].apply(); event.srcElement.className="loseitems" if (sp) event.srcElement.filters[0].play(); }} //--------------js代码结束------------- </script> <script> //------------插入菜单项目演示--------- //addmenu(type,caption,url,target,icon) //type=0 超连接 type=1 执行javascript语句 type=2 分割线 //caption 显示文字 //url 地址或javascript语句 //target 目标 //icon 图标 addmenu(1,"关于我","alert('我是舜子 英文名PuterJam')","","attachments/month_0406/jg_n_help.gif") addmenu(0,"我的Blog","http://www.sunsinwa.com/puterjam/","_blank") addmenu(1,"添加到收藏夹","window.external.AddFavorite('http://www.sunsinwa.com/puterjam/', 'PuterJam Blog')") addmenu(0,"联系我","mailto:puterjam@etang.com","_blank") addmenu(2) addmenu(0,"蓝色理想","http://www.blueidea.com/","_blank") addmenu(0,"经典论坛","http://www.blueidea.com/bbs","_blank") addmenu(2) addmenu(1,"动画效果:<span id=kg>ON<span>","sp=!sp;if (sp) {kg.innerText='ON'} else {kg.innerText='OFF'}") addmenu(1,"上一个效果","ts--;if (ts<1) ts=23") addmenu(1,"下一个效果","ts++;if (ts>23) ts=1") buildmenu() </script> <style> .clsMenu { cursor: default; color: #000000; position: absolute; width: 150px; background-color: #D4D0C8; border: 1px solid #000000; visibility: hidden; filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3); background-image:url('attachments/month_0406/84v__back.gif') } .menuitems { font-size: 12px; color: #000000; padding-left: 30px; padding-right: 19px; padding-top:2px; padding-bottom:0px; line-height: 18px; background-color:#B6BDD2; border:1px solid #0A246A; color:#000000; background-repeat:no-repeat; } .loseitems { font-size: 12px; color: #000000; padding-left: 29px; padding-right: 10px; padding-top:1px; padding-bottom:1px; line-height: 18px; color:#000000; background-repeat:no-repeat; } hr { width:80%; height:1px; } </style> </head> <body> </body> </html>