上一篇 |

Javascript

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

作者:puterjam 日期:2004-06-09

字体大小: 小中大

最近写了一个右键菜单的代码!

加了一些简单的特效.
如果要转载请写明出处:http://moodboy.com/puterjam/blog

HTML代码

<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>

//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>

.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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

使用方法:

复制内容到剪贴板

程序代码

//--插入菜单项目演示--
<script>
//addmenu(type,caption,url,target,icon)
//type=0 超连接 type=1 执行javascript语句 type=2 分割线
//caption 显示文字
//url 地址或javascript语句
//target 目标
//icon 图标

addmenu(1,"关于我","alert('我是舜子英文名PuterJam')","","http://moodboy.com/puterjam/blog/attachments/month_0406/jg_n_help.gif")
addmenu(0,"我的Blog","http://moodboy.com/puterjam/blog/","_blank")
addmenu(1,"添加到收藏夹","window.external.AddFavorite('http://moodboy.com/puterjam/blog/', '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>

[本日志由 puterjam 于 2004-08-21 02:41 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

相关日志:

评论: 11 | 引用: 0 | 查看次数: -

1 | 2 | ›

笨笨舅[2008-04-07 07:58 PM |

]

不错的代码收藏了

笨笨舅--http://www.wzero.cn
鹰有时飞得比鸡还低但鸡永远飞不到鹰的高度

fdlihua[2008-01-07 10:44 PM |

]

大哥！看了你的博客，我明白了，你的权威
新开传世

随心所欲[2006-04-24 12:27 AM |

]

那个后面加到底怎么用牙？？

单恋一块铁[2006-04-18 02:32 PM |

]

特效依赖IE滤镜,不兼容其他浏览器,没按照WEB标准来构造HTML,像菜单这种结构体,用下面这种形式显然要比用table要好很多
<menu>
  <ul>
    <li>item1</li>
    <li>item2</li>
  </ul>
</menu>

wisely[2004-08-20 07:01 PM |

]

呵呵,我知道了,是我问糊涂了.只要在前面加[html]后面加[/html],我也搞了个blog玩,还没有改玩,呵呵!!
谢谢你的帮助啊,我的qq是3621192,有机会交流下啊

puterjam[2004-08-20 08:48 AM |

]

wisely 你有QQ或MSN吗?我加你再讨论好了,我也有点糊涂了

wisely[2004-08-20 08:25 AM |

]

还是不懂，能不能说的具体点，就是在你这里，你是怎么样操作的？谢谢了！

puterjam[2004-08-19 08:29 PM |

]

你是说“运行此代码”的匡的JS代码吗.
其实是新打开一个窗口,然后把代码用document.write写到新的窗口里去

1 | 2 | ›

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.