超酷的XP风格的网页右键菜单特效代码

最新推荐文章于 2022-03-16 17:46:32 发布
转载 最新推荐文章于 2022-03-16 17:46:32 发布 · 606 阅读 · 0
文章标签：

#xp #function #cmd #menu #border #generator

本文提供了一段实现XP风格的网页右键菜单特效的JavaScript代码。该代码通过自定义菜单项，包括返回主页、设为主页等功能，为网页添加了美观且实用的右键菜单。此外，还提供了关闭菜单的选项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

<HTML>
<HEAD>
<TITLE></TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<META content="MSHTML 5.00.2920.0" name=GENERATOR>
<script>
<!--
// menu object
function contextMenu()
{
 this.items   = new Array();
 
 this.addItem = function (item)
 {
  this.items[this.items.length] = item;
 }

 this.show = function (oDoc)
 {
  var strShow = "";
  var i;
  
  strShow = "<div id="rightmenu" style="BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10">";
  strShow += "<table border="0" height="";
  strShow += this.items.length * 20;
  strShow += "" cellpadding="0" cellspacing="0">";
  strShow += "<tr height="3"><td bgcolor="#d0d0ce" width="2"></td><td>";
  strShow += "<table border="0" width="100%" height="100%" cellpadding=0 cellspacing=0 bgcolor="#ffffff">";
  strShow += "<tr><td bgcolor="#d0d0ce" width="23"></td><td><img src=" " height="1" border="0"></td></tr></table>";
  strShow += "</td><td width="2"></td></tr>";
  strShow += "<tr><td bgcolor="#d0d0ce"></td><td>";
  strShow += "<table border="0" width="100%" height="100%" cellpadding=3 cellspacing=0 bgcolor="#ffffff">";
  oDoc.write(strShow);
  for(i=0; i<this.items.length; i++)
  {
   this.items[i].show(oDoc);
  }
  strShow = "</table></td><td></td></tr>";
  strShow += "<tr height="3"><td bgcolor="#d0d0ce"></td><td>";
  strShow += "<table border="0" width="100%" height="100%" cellpadding=0 cellspacing=0 bgcolor="#ffffff">";
  strShow += "<tr><td bgcolor="#d0d0ce" width="23"></td><td><img src=" " height="1" border="0"></td></tr></table>";
  strShow += "</td><td></td></tr>";
  strShow += "</table></div> ";
  oDoc.write(strShow);
 }
}

// menu Item object
function contextItem(text, icon, cmd, type)
{
 this.text = text ? text : "";
 this.icon = icon ? icon : "";
 this.cmd = cmd ? cmd : "";
 this.type = type ? type : "menu";
 
 this.show = function (oDoc)
 {
  var strShow = "";
  
  if(this.type == "menu")
  {
   strShow += "<tr ";
   strShow += "onmouseover="changeStyle(this, 'on');" ";
   strShow += "onmouseout="changeStyle(this, 'out');" ";
   strShow += "onclick="";
   strShow += this.cmd;
   strShow += "">";
   strShow += "<td class="ltdexit" width="16">";
   if (this.icon == "")
    strShow += "&nbsp;";
   else {
    strShow += "<img border="0" src="";
    strShow += this.icon;
    strShow += "" width="16" height="16" style="POSITION: relative"></img>";
   }
   strShow += "</td><td class="mtdexit">";
   strShow += this.text;
   strShow += "</td><td class="rtdexit" width="5">&nbsp;</td></tr>";
  }
  else if (this.type == "separator")
  {
   strShow += "<tr><td class="ltdexit">&nbsp;</td>";
   strShow += "<td class="mtdexit" colspan="2"><hr color="#000000" size="1"></td></tr>";
  }
  
  oDoc.write(strShow);
 }
}

function changeStyle(obj, cmd)
{ 
 if(obj) try {
  var imgObj = obj.children(0).children(0);
  
  if(cmd == 'on') {
   obj.children(0).className = "ltdfocus";
   obj.children(1).className = "mtdfocus";
   obj.children(2).className = "rtdfocus";
   if(imgObj)
   {
    if(imgObj.tagName.toUpperCase() == "IMG")
    {
     imgObj.style.left = "-1px";
     imgObj.style.top = "-1px";
    }
   }
  }
  else if(cmd == 'out') {
   obj.children(0).className = "ltdexit";
   obj.children(1).className = "mtdexit";
   obj.children(2).className = "rtdexit";
   if(imgObj)
   {
    if(imgObj.tagName.toUpperCase() == "IMG")
    {
     imgObj.style.left = "0px";
     imgObj.style.top = "0px";
    }
   }
  }
 }
 catch (e) {}
}

function showMenu()
{
 var x, y, w, h, ox, oy;
 
 x = event.clientX;
 y = event.clientY;
 
 var obj = document.getElementById("rightmenu");
 if (obj == null)
  return true;
 
 ox = document.body.clientWidth;
 oy = document.body.clientHeight;
 if(x > ox || y > oy)
  return false;
 w = obj.offsetWidth;
 h = obj.offsetHeight;
 if((x + w) > ox)
   x = x - w;
 if((y + h) > oy)
  y = y - h;
 
 obj.style.posLeft = x + document.body.scrollLeft;
 obj.style.posTop = y + document.body.scrollTop;
 obj.style.visibility = "visible";
 
 return false;
}
function hideMenu()
{
 if(event.button == 0)
 {
  var obj = document.getElementById("rightmenu");
  if (obj == null)
   return true;
  obj.style.visibility = "hidden";
  obj.style.posLeft = 0;
  obj.style.posTop = 0;
 }
}

function writeStyle()
{
 var strStyle = "";
 
 strStyle += "<STYLE type=text/css>";
 strStyle += "TABLE {Font-FAMILY: "Tahoma","Verdana","宋体"; FONT-SIZE: 9pt}";
 strStyle += ".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}";
 strStyle += ".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}";
 strStyle += ".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}";
 strStyle += ".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}";
 strStyle += ".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}";
 strStyle += ".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}";
 strStyle += "</STYLE>";
 
 document.write(strStyle);
}

function makeMenu()
{
 var myMenu, item;
 
 var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webjx.com/'); return false;";
 var favorate_cmd = "window.external.addFavorite('http://www.webjx.com/','网页教学网'); return false;";
 var viewcode_cmd = "window.location = 'view-source:' + window.location.href";
 
 myMenu = new contextMenu();
 
 item = new contextItem("返回主页", "http://www.webjx.com/js/home.gif", "top.location='http://www.webjx.com/';", "menu");
 myMenu.addItem(item);
 
 item = new contextItem("设为主页", "http://www.webjx.com/js/home.gif", homepage_cmd, "menu");
 myMenu.addItem(item);
 
 item = new contextItem("添加到收藏夹", "http://www.webjx.com/js/favadd.gif", favorate_cmd, "menu");
 myMenu.addItem(item);
 
 item = new contextItem("联系作者", "http://www.webjx.com/js/mail.gif", "location.href='mailto:info@webjx.com'", "menu");
 myMenu.addItem(item);
 
 item = new contextItem("", "", "", "separator");
 myMenu.addItem(item);
 
 item = new contextItem("察看源码", "http://www.webjx.com/js/edit.gif", viewcode_cmd, "menu");
 myMenu.addItem(item);
 
 myMenu.show(this.document);

 delete item;
 delete myMenu;
}

function toggleMenu(isEnable)
{
 if(isEnable)
  document.oncontextmenu = showMenu;
 else
  document.oncontextmenu = new function() {return true;};
}

writeStyle();
makeMenu();
document.onclick = hideMenu;
document.oncontextmenu = showMenu;
file://-->
</script>

</HEAD>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="3">
 <tr><td valign="top">
  <div id="docBoard" style="width: 100%">
   超酷的XP风格的网页右键菜单特效代码http://www.webjx.com/htmldata/sort/5.html
  </div>
 </td>
 <td valign="top" align="right">
  <p><input type="checkbox" name="closerm" onclick="toggleMenu(!this.checked);">关闭右键菜单</p>
 </td>
 </tr>
</table>
</body>
</HTML> 
仿xp风格的web界面
05-07
仿xp风格的界面，非常不错
js实现的XP风格的右键菜单
weixin_30546933的博客
04-14 156
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>网页特效|www.jb51.net|---XP风格的右键菜单</title><STYLE>.menutable{BACKGROU...
网站怎么自定义右键？美化教程
weixin_45127815的博客
03-16 580
无意中看到一个博客美化了鼠标右键，虽然有点花里胡哨，但是我还决定分享一下 演示图 代码 放置在我们的网站的底部代码，临时把谷歌搜索右键去掉了，因为没办法搜索访问，其他右键内容自行修改即可。 <!-- 自定义右键 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center
xp风格css,超级 HTML HTMLEditor ---- winXP 风格 [2]
weixin_31955465的博客
08-04 259
超级 HTML HTMLEditor ---- winXP 风格 [2]时间：2006/7/19 13:24:15作者：佚名人气：82刚才那个名字叫 htmleditor.aspfilename: color.aspLooker HTML Editor v1.0 -- ColorTD{FONT-SIZE: 10.8pt}BODY{FONT-SIZE: 10.8pt}BUTTON{WIDTH: 5e...
让你的右键菜单变成美艳绝伦
冷血书生的专栏
06-16 5646
修改方法：1.把Resource Hacker V3.4.0 汉化版.rar 和ContextBG.rar下载后解压缩到任意地方。2.进入Resource Hacker V3.4.0 汉化版文件夹，运行ResHacker.exe，点击菜单“文件－打开－弹出‘打开包含资源的文件’对话框－定位找到解压后的ContextBG.dll’－双击”，如图1。3.然后依次展开“Bitmap－129－2057”，
超酷XP风格网页右键菜单特效代码
03-20
标题中的“超酷XP风格网页右键菜单特效代码”指的是在网页中实现一种类似微软Windows XP操作系统中右键菜单的交互效果。这种效果通常会给用户带来熟悉的感觉，并且可以通过自定义设计来提升网页的用户体验。在网页...
超酷XP风格网页右键菜单.rar
07-04
《超酷XP风格网页右键菜单：JS特效与菜单导航深度解析》 在网页设计领域，用户体验是至关重要的因素之一，而右键菜单作为交互设计的一部分，常常被用来提供便捷的功能选项，提升用户操作的效率。"超酷XP风格网页...
实现XP风格网页右键菜单的特效代码
在探讨如何创建超酷的XP风格网页右键菜单特效代码之前，首先需要了解网页右键菜单的基本原理和实现方式。网页右键菜单通常是指用户在网页上点击鼠标右键时出现的快捷菜单，它能够为用户提供方便快捷的浏览体验。在...
打造个性化XP风格网页右键菜单教程
标题中提到的“超酷XP风格网页右键菜单”指的是一个具有Windows XP操作系统的用户体验风格的网页右键菜单。XP风格，即Windows XP风格，是微软在2001年发布的一款操作系统——Windows XP的用户界面风格，其特点是使用...
超酷的网页导航菜单特效代码
03-20
"超酷的网页导航菜单特效代码"是一个专为提升用户体验而设计的资源，它包含了一系列创新且吸引人的导航菜单实现方式。这个压缩包包含了实现这些特效的HTML文件`index.htm`，以及帮助文档和相关链接。 `index.htm`是...
jQuery鼠标右键美化菜单.zip
05-23
jQuery鼠标右键美化菜单基于jquery-1.8.2.min.js制作。
网页特效代码 右键菜单的制作！[精华]
11-25
网页特效代码 右键菜单的制作！[精华]
cmd代码大全
02-22
有利于大家的CMD代码，当然，不要用来做坏事哦。WIN+R组合键，在对话框里输入cmd就可以打开啦。
抖音爱心特效
08-27
抖音视频制作爱心那个表白动画特效，（HTML5+jQuery制作温馨浪漫爱心表白动画特效）
一款超有趣的CMD代码雨
09-27
超级有趣的黑客帝国代码雨！很多人都觉得黑客帝国里，电脑屏幕上的绿色代码雨非常的炫酷。想要制作一个来炫耀一番。下面，小编来介绍制作方法。
[整理]网页自定义鼠标右键菜单特效
知周博远
05-23 355
今天偶然查看一个已经关闭的网站在2003年的快照是发现的，感觉比较经典，所以整理收藏起来。演示：http://www.yes1000.com/demo/menu/JS文件： 程序代码 // 菜单的HTML代码var strMenu = "&lt;div id=\"menu\" class=\"clsMenu\" onMouseover=\"highlight()\" onMouseout=\"...
cmd炫酷代码大全
热门推荐
一个无聊的程序猿
08-04 18万+
事先准备: 新建一个txt，后缀名改成cmd（或bat）里面写代码即可 声明: 文章目录cmd炫酷代码大全1.循环类1.1.黑客王国1.2.命令tree1.3.我是这条街，这条街，最靓的仔1.4.数字点阵1.5.数字王国加强版2.其他类2.1.观看星球大战完结 cmd炫酷代码大全 1.循环类 1.1.黑客王国 color a echo off :123 echo 0101010010100101010101010101010101010101010101010101001010101 echo 10101
特效代码------流星雨
我写写哈的博客
06-24 4563
//Star.h #pragma once #include <graphics.h> #include <conio.h> #include <ctime> #define SCREEN_WIDTH 1920 #define SCREEN_HEIGHT 1080 #define MAXSTAR 1080 class Star { protected: double m_x = 0; int m_y;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值