模板
教程
环境
性能
功能
管理
送大家一个好东西。。文章发表了。。我公布代码！！
发表于：2007-06-30来源：作者：点击数：
标签：
HTML HEAD TITLE使用 Java Script和CSS制作仿Office XP 风格的网页右键菜单/TITLE STYLE .flyoutLink { CURSOR: none; FONT-FA MI LY: Verdana, Arial, Helvetica; FONT-SIZE: 14px; PADDING-LEFT: 5px; PADDING-RIGHT: 25px; PADDING-TOP: 1px } .skin0 { BO
<HTML><HEAD>
<TITLE>使用JavaScript和CSS制作仿Office XP风格的网页右键菜单</TITLE>
<STYLE>
.flyoutLink {
CURSOR: none; FONT-FAMILY: "Verdana", "Arial", "Helvetica"; FONT-SIZE: 14px; PADDING-LEFT: 5px; PADDING-RIGHT: 25px; PADDING-TOP: 1px
}
.skin0 {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; VISIBILITY: hidden; BORDER-LEFT: 1px solid; WIDTH: 110px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; FONT-FAMILY: Verdana; POSITION: absolute; BACKGROUND-COLOR: white
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 90px; CURSOR: default; BORDER-BOTTOM: buttonhighlight 2px outset; POSITION: absolute; BACKGROUND-COLOR: white
}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE=JavaScript>
//用于模仿Office XP的风格
function MouseOver(src,BackColor)
{
if (!src.contains(event.fromElement))
{
src.bgColor = BackColor;
src.style.bordercolor = "#000000";
}
}
function MouseOut(src, BackColor)
{
if (!src.contains(event.toElement))
{
src.bgColor = BackColor;
src.style.bordercolor = "#000000";
}
}
function BcMouseOver(src)
{
if (!src.contains(event.fromElement))
{
src.border = 1;
src.style.bgColor = "#B6BDD2"
}
}
function BcMouseOut(src)
{
if (!src.contains(event.toElement))
{
src.border = 0;
src.style.bgColor = "#f1f1f1"
}
}
//弹出消息
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location=@#"+args[i+1]+"@#");
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
</script>
<div id=ie5menu style="backgroundColor=white">
<table width="150" border="0" bgcolor="#f1f1f1" bordercolor="#000000" cellpadding="0" cellspacing="0">
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="location.reload()">
<td width="26"><img border="0" src="refurbish.gif" width="24"></td>
<td class=flyoutLink>刷新</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="window.close()">
<td width="26"><img border="0" src="close.gif" width="24"></td>
<td class=flyoutLink>关闭窗口</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="history.go(-1)">
<td width="26"><img border="0" src="back.gif" width="24"></td>
<td class=flyoutLink>后退</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="history.go(1)">
<td width="26"><img border="0" src="forward.gif" width="24"></td>
<td class=flyoutLink>前进</td>
</tr>
</table>
</td>
</tr>
<tr bordercolor="#f1f1f1">
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
<tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="MM_popupMsg(@#欢迎使用仿Office XP风格的网页右键菜单程序\r欢迎大家给我来信\reaststarbuy@sina.com@#)">
<td width="26"><img border="0" src="about.gif" width="24"></td>
<td class=flyoutLink>关于本菜单</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<SCRIPT type=text/JavaScript>
//检测浏览器
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.FORM.submit();}}
}
clckcnt = 0;
var nn = !!document.layers;
var ie = !!document.all;
if (nn) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalSystemClipboardAclearcase/" target="_blank" >ccess");
var fr=new java.awt.Frame();
var Zwischenablage = fr.getToolkit().getSystemClipboard();
}
var menuskin=0
var display_url=0
//显示右键菜单
function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
//菜单定位
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY
ie5menu.style.visibility="visible"
return false
}
//右键菜单隐藏
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
if (document.all&&window.print){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</SCRIPT>
<Body>
<P>欢迎使用本菜单，欢迎大家给我来信。</P>
</Body>
</HTML>
注意：使用的时候把图片改掉就可以了。。
效果不是怎么好。图片的效果没有做出来。。。
