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

最新推荐文章于 2026-03-31 03:57:31 发布
转载 最新推荐文章于 2026-03-31 03:57:31 发布 · 640 阅读 · 0
标签
#xp #function #cmd #menu #border
#generator
本文提供了一段实现XP风格的网页右键菜单特效的JavaScript代码。该代码通过自定义菜单项，包括返回主页、设为主页等功能，为网页添加了美观且实用的右键菜单。此外，还提供了关闭菜单的选项。

 

<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> 
cmd代码大全
02-22
有利于大家的CMD代码，当然，不要用来做坏事哦。WIN+R组合键，在对话框里输入cmd就可以打开啦。
抖音爆火的黑客帝国文字雨HTML页面
08-13
抖音爆火的黑客帝国文字雨HTML页面。最近抖音上很多小伙伴都在玩的文字雨效果HTML页面，仿照知乎大佬学做了一个。速度文字可调，其实还有另外一版鬼畜效果，暂时就不拿出来分享了，哈哈。祝大家玩得开心，嘻嘻嘻。溜了
网站怎么自定义右键？美化教程
weixin_45127815的博客
03-16 634
无意中看到一个博客美化了鼠标右键，虽然有点花里胡哨，但是我还决定分享一下 演示图 代码 放置在我们的网站的底部代码，临时把谷歌搜索右键去掉了，因为没办法搜索访问，其他右键内容自行修改即可。 <!-- 自定义右键 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center
Typecho自定义右键菜单美化和禁用F12-星泽V社
Karsa_xz的博客
02-27 1544
右键美化 Joe主题在后台-外观设置-设置外观-全局设置-自定义<body></body>标签内填入如下代码： <!-- 调用js --> <script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script> <!-- 自定义右键菜单美化 --> <style type="text/css"> a {text-decorati.
FPGA频率测量避坑指南：从测频法、测周法到等精度法的选择与误差分析
最新发布
weixin_30632089的博客
03-31 630
本文深入探讨FPGA频率测量的三大方法：测频法、测周法和等精度法，分析其核心原理、适用场景及误差来源。通过详细的工程优化策略和实际案例，帮助工程师构建高精度、可靠的频率测量系统，特别适合FPGA开发者和数字电路设计人员参考。
自定义浏览器默认右击菜单栏
每天进步一点点
07-25 1220
在页面的任意位置点击右键，自定义的菜单都会跟随鼠标的点击位置来显示出来。本文简单介绍了如何更换浏览器的默认右击菜单栏。话不多说，直接上代码！
[整理]网页自定义鼠标右键菜单特效
Reasoncool的专栏
02-26 1269
演示：http://www.yes1000.com/demo/menu/JS文件： 程序代码// 菜单的HTML代码var strMenu = ""strMenu += "http://www.yes1000.com);/" >设为首页"strMenu += "http://www.yes1000.com, ::一想千开::)/">加入收藏"strMenu += ""strMe
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
python趣味代码之ffmpeg实现视频转码+cmd动画效果
pandawangyt的博客
05-10 1万+
背景： 这篇博客是我看到一个视频，使用python实现的一个趣味代码，然后就自己尝试实现了一下，以此记录一下整个过程。 内容： 主要实现的内容就是使用mmfpeg这个工具，实现对视频的读取，然后从视频中按照一定的帧率提取出来照片，再将这些照片转化为灰度图像，设定合适的阈值，找到符合阈值的灰度值的位置。 首先给大家看一下结果，然后再一步一步说明怎么实现的： 1. 这是在网上找的一个GIF...
让你的右键菜单变成美艳绝伦
冷血书生的专栏
06-16 5755
修改方法：1.把Resource Hacker V3.4.0 汉化版.rar 和ContextBG.rar下载后解压缩到任意地方。2.进入Resource Hacker V3.4.0 汉化版文件夹，运行ResHacker.exe，点击菜单“文件－打开－弹出‘打开包含资源的文件’对话框－定位找到解压后的ContextBG.dll’－双击”，如图1。3.然后依次展开“Bitmap－129－2057”，
typecho:鼠标右键改造
jiewaikexue的博客
04-28 1375
预览如上图 最近这两天在建造自己的blog,美化一下 使用方法~ 声明: 本人没有任何前端基础,都是从往上找来在修修改改,所以,可能会有问题 我甚至只能说是学了2小时 我使用的 是阿里巴巴矢量库,里面的图标都是我自己找到的,由于后面可能需要继续修改,所以可能那一天就失效了 下面是我使用的图标(编辑器不是好用,排版先这样吧) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-akaQ0O4d-1651075727998)(https://www.nekoyume.xyz/usr/.
特效代码------流星雨
我写写哈的博客
06-24 4745
//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;
【今天黑一下学校教务系统】某学校渗透测试远程命令执行(已授权)
shandongjiushen的博客
02-07 5318
我和小伙伴们都惊呆了
一款超有趣的CMD代码雨
09-27
超级有趣的黑客帝国代码雨！很多人都觉得黑客帝国里，电脑屏幕上的绿色代码雨非常的炫酷。想要制作一个来炫耀一番。下面，小编来介绍制作方法。
jQuery鼠标右键美化菜单.zip
05-23
jQuery鼠标右键美化菜单基于jquery-1.8.2.min.js制作。
抖音视频制作爱心那个表白动画特效，（HTML5+jQuery制作温馨浪漫爱心表白动画特效）
08-27
【抖音爱心特效】是一种在抖音平台上流行的视频创作手法，它利用了HTML5和jQuery技术来构建一个温馨浪漫的爱心表白动画。这个特效通常用于制作情感丰富的视频，表达爱意或者增添视频的趣味性，吸引观众的注意力。在互联网时代，这种特效不仅限于抖音，也广泛应用于其他社交媒体平台，增加了互动性和视觉吸引力。 HTML5是现代网页开发的标准，提供了丰富的功能和API，使得开发者可以创建更具动态性和交互性的网页内容。在这个特效中，HTML5的Canvas元素可能是关键所在，它允许程序员通过JavaScript绘制图形，实现动态的爱心动画效果。Canvas提供了一种强大的方式来实时渲染图形，包括绘制路径、形状、图像等，非常适合创建这种动态的心形动画。 jQuery是一个流行的JavaScript库，简化了JavaScript的DOM操作，事件处理，动画效果以及Ajax交互。在制作爱心表白动画时，jQuery的动画函数如`fadeIn()`, `fadeOut()`, `animate()`等可以轻松地实现爱心的出现、消失和移动效果，让动画更加流畅和自然。同时，jQuery的事件监听功能可以让爱心在用户交互（如点击、滑动）时触发特定的动画，提升用户体验。 在【HTML5%2BjQuery制作温馨浪漫爱心表白动画特效】这个压缩包文件中，可能包含以下内容： 1. HTML文件：这是网页的基础结构，其中可能包含了Canvas元素和其他用于控制动画的HTML标记。 2. CSS文件：负责爱心动画的样式设计，包括颜色、大小、位置等视觉效果。 3. JavaScript文件：主要包含jQuery代码，用于实现动画逻辑，控制爱心的运动轨迹、速度和动画的顺序。 4. 可能还会有图片或SVG矢量图资源，用于绘制爱心图形。 学习并运用这些技术，不仅可以创建抖音上的爱心特效，还能帮助你理解Web前端开
js实现的XP风格的右键菜单
weixin_30546933的博客
04-14 188
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>网页特效|www.jb51.net|---XP风格的右键菜单</title><STYLE>.menutable{BACKGROU...
CMD恶搞命令集，假装自己是黑客
qq_32807945的博客
02-23 7万+
整理的一些CMD脚本命令，可以用在小白朋友面前秀一波。 这些操作一致特征就是：看似很高端，实则然并卵~ 使用方法： 在任意位置新建一个文本文档，然后将代码放到里面，保存，将后缀改成bat，然后就可以用了。 无限cmd弹窗(炸弹弹窗) 实现效果：会无限制无终止的打开cmd窗口 代码： :start start cmd goto start 快速扫描文件 实现效果：在控制台窗口扫描显示文件信...
CMD运行代码大全
01-28
CMD 运行 代码
看看你们炫酷的命令行界面，先来我的
程序人生的博客
03-25 3万+
点击上方“程序人生”，选择“置顶公众号”第一时间关注程序猿（媛）身边的故事2018区块链技术及应用峰会(BTA)·中国倒计时5天2018，想要follow最火的区块链技术？你还差一场严谨纯粹的技术交流会——2018区块链技术及应用峰会(BTA)·中国将于2018年3月30-31日登陆北京喜来登长城饭店。追求专业性？你要的这里全都有：当超强嘉宾阵容遇上业界同好的脑洞大联欢，1+1=无限可能，目前门票
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值