设为首页 | 热门标签 | RSS 订阅 | 加入收藏
游客可以选择 高级搜索 | 成为会员 | 马上登陆

返回首页
当前位置: 主页 > 编程派 > Javascript脚本 > 正文

XP风格的网页右键菜单

时间:2009-08-19 21:49 作者:飞雪鸿云 来源:未知 点击: 次
XP风格的网页右键菜单
　　

  1. <HTML> 
  2. <HEAD> 
  3. <TITLE>超酷的效果相当不错的网页右键菜单</TITLE> 
  4. <META content="text/html; charset=gb2312" http-equiv=Content-Type> 
  5. <META content="MSHTML 5.00.2920.0" name=GENERATOR> 
  6. <script> 
  7. <!--  
  8. // menu object  
  9. function contextMenu()  
  10. {  
  11. this.items   = new Array();  
  12. this.addItem = function (item)  
  13. {  
  14. this.items[this.items.length] = item;  
  15. }  
  16. this.show = function (oDoc)  
  17. {  
  18. var strShow = "";  
  19. var i;  
  20. strShow = "<div id=\"rightmenu\" style=\"BACKGROUND-COLOR: #ffffff; BORDER: #000000 1px solid; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10\">";  
  21. strShow += "<table border=\"0\" height=\"";  
  22. strShow += this.items.length * 20;  
  23. strShow += "\" cellpadding=\"0\" cellspacing=\"0\">";  
  24. strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\" width=\"2\"></td><td>";  
  25. strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";  
  26. strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";  
  27. strShow += "</td><td width=\"2\"></td></tr>";  
  28. strShow += "<tr><td bgcolor=\"#d0d0ce\"></td><td>";  
  29. strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=3 cellspacing=0 bgcolor=\"#ffffff\">";  
  30. oDoc.write(strShow);  
  31. for(i=0; i<this.items.length; i++)  
  32. {  
  33. this.items[i].show(oDoc);  
  34. }  
  35. strShow = "</table></td><td></td></tr>";  
  36. strShow += "<tr height=\"3\"><td bgcolor=\"#d0d0ce\"></td><td>";  
  37. strShow += "<table border=\"0\" width=\"100%\" height=\"100%\" cellpadding=0 cellspacing=0 bgcolor=\"#ffffff\">";  
  38. strShow += "<tr><td bgcolor=\"#d0d0ce\" width=\"23\"></td><td><img src=\" \" height=\"1\" border=\"0\"></td></tr></table>";  
  39. strShow += "</td><td></td></tr>";  
  40. strShow += "</table></div>\n";  
  41. oDoc.write(strShow);  
  42. }  
  43. }  
  44. // menu Item object  
  45. function contextItem(text, icon, cmd, type)  
  46. {  
  47. this.text = text ? text : "";  
  48. this.icon = icon ? icon : "";  
  49. this.cmd = cmd ? cmd : "";  
  50. this.type = type ? type : "menu";  
  51. this.show = function (oDoc)  
  52. {  
  53. var strShow = "";  
  54. if(this.type == "menu")  
  55. {  
  56. strShow += "<tr ";  
  57. strShow += "onmouseover=\"changeStyle(this, 'on');\" ";  
  58. strShow += "onmouseout=\"changeStyle(this, 'out');\" ";  
  59. strShow += "onclick=\"";  
  60. strShow += this.cmd;  
  61. strShow += "\">";  
  62. strShow += "<td class=\"ltdexit\" width=\"16\">";  
  63. if (this.icon == "")  
  64. strShow += "&nbsp;";  
  65. else {  
  66. strShow += "<img border=\"0\" src=\"";  
  67. strShow += this.icon;  
  68. strShow += "\" width=\"16\" height=\"16\" style=\"POSITION: relative\"></img>";  
  69. }  
  70. strShow += "</td><td class=\"mtdexit\">";  
  71. strShow += this.text;  
  72. strShow += "</td><td class=\"rtdexit\" width=\"5\">&nbsp;</td></tr>";  
  73. }  
  74. else if (this.type == "separator")  
  75. {  
  76. strShow += "<tr><td class=\"ltdexit\">&nbsp;</td>";  
  77. strShow += "<td class=\"mtdexit\" colspan=\"2\"><hr color=\"#000000\" size=\"1\"></td></tr>";  
  78. }  
  79. oDoc.write(strShow);  
  80. }  
  81. }  
  82. function changeStyle(obj, cmd)  
  83. {  
  84. if(obj) try {  
  85. var imgObj = obj.children(0).children(0);  
  86. if(cmd == 'on') {  
  87. obj.children(0).className = "ltdfocus";  
  88. obj.children(1).className = "mtdfocus";  
  89. obj.children(2).className = "rtdfocus";  
  90. if(imgObj)  
  91. {  
  92. if(imgObj.tagName.toUpperCase() == "IMG")  
  93. {  
  94. imgObj.style.left = "-1px";  
  95. imgObj.style.top = "-1px";  
  96. }  
  97. }  
  98. }  
  99. else if(cmd == 'out') {  
  100. obj.children(0).className = "ltdexit";  
  101. obj.children(1).className = "mtdexit";  
  102. obj.children(2).className = "rtdexit";  
  103. if(imgObj)  
  104. {  
  105. if(imgObj.tagName.toUpperCase() == "IMG")  
  106. {  
  107. imgObj.style.left = "0px";  
  108. imgObj.style.top = "0px";  
  109. }  
  110. }  
  111. }  
  112. }  
  113. catch (e) {}  
  114. }  
  115. function showMenu()  
  116. {  
  117. var x, y, w, h, ox, oy;  
  118. x = event.clientX;  
  119. y = event.clientY;  
  120. var obj = document.getElementById("rightmenu");  
  121. if (obj == null)  
  122. return true;  
  123. ox = document.body.clientWidth;  
  124. oy = document.body.clientHeight;  
  125. if(x > ox || y > oy)  
  126. return false;  
  127. w = obj.offsetWidth;  
  128. h = obj.offsetHeight;  
  129. if((x + w) > ox)  
  130. xx = x - w;  
  131. if((y + h) > oy)  
  132. yy = y - h;  
  133. obj.style.posLeft = x + document.body.scrollLeft;  
  134. obj.style.posTop = y + document.body.scrollTop;  
  135. obj.style.visibility = "visible";  
  136. return false;  
  137. }  
  138. function hideMenu()  
  139. {  
  140. if(event.button == 0)  
  141. {  
  142. var obj = document.getElementById("rightmenu");  
  143. if (obj == null)  
  144. return true;  
  145. obj.style.visibility = "hidden";  
  146. obj.style.posLeft = 0;  
  147. obj.style.posTop = 0;  
  148. }  
  149. }  
  150. function writeStyle()  
  151. {  
  152. var strStyle = "";  
  153. strStyle += "<STYLE type=text/css>";  
  154. strStyle += "TABLE {Font-FAMILY: \"Tahoma\",\"Verdana\",\"宋体\"; FONT-SIZE: 9pt}";  
  155. strStyle += ".mtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; CURSOR: hand}";  
  156. strStyle += ".mtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid}";  
  157. strStyle += ".ltdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; CURSOR: hand}";  
  158. strStyle += ".ltdexit {BACKGROUND-COLOR: #d0d0ce; BORDER-BOTTOM: #d0d0ce 1px solid; BORDER-TOP: #d0d0ce 1px solid; BORDER-LEFT: #d0d0ce 1px solid}";  
  159. strStyle += ".rtdfocus {BACKGROUND-COLOR: #ccccff; BORDER-BOTTOM: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; CURSOR: hand}";  
  160. strStyle += ".rtdexit {BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-RIGHT: #ffffff 1px solid}";  
  161. strStyle += "</STYLE>";  
  162. document.write(strStyle);  
  163. }  
  164. function makeMenu()  
  165. {  
  166. var myMenu, item;  
  167. var homepage_cmd = "this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.webjx.com/'); return false;";  
  168. var favorate_cmd = "window.external.addFavorite('http://www.webjx.com/','网页教学网'); return false;";  
  169. var viewcode_cmd = "window.location = 'view-source:' + window.location.href";  
  170. myMenu = new contextMenu();  
  171. item = new contextItem("返回主页", "/teixiao/UploadFiles_4612/200712/20071206092641498.gif", "top.location='http://www.webjx.com/';", "menu");  
  172. myMenu.addItem(item);  
  173. item = new contextItem("设为主页", "/teixiao/UploadFiles_4612/200712/20071206092641498.gif", homepage_cmd, "menu");  
  174. myMenu.addItem(item);  
  175. item = new contextItem("添加到收藏夹", "/teixiao/UploadFiles_4612/200712/20071206092641423.gif", favorate_cmd, "menu");  
  176. myMenu.addItem(item);  
  177. item = new contextItem("联系作者", "/teixiao/UploadFiles_4612/200712/20071206092641281.gif", "location.href='mailto:info@webjx.com'", "menu");  
  178. myMenu.addItem(item);  
  179. item = new contextItem("", "", "", "separator");  
  180. myMenu.addItem(item);  
  181. item = new contextItem("察看源码", "/teixiao/UploadFiles_4612/200712/20071206092641749.gif", viewcode_cmd, "menu");  
  182. myMenu.addItem(item);  
  183. myMenu.show(this.document);  
  184. delete item;  
  185. delete myMenu;  
  186. }  
  187. function toggleMenu(isEnable)  
  188. {  
  189. if(isEnable)  
  190. document.oncontextmenu = showMenu;  
  191. else  
  192. document.oncontextmenu = new function() {return true;};  
  193. }  
  194. writeStyle();  
  195. makeMenu();  
  196. document.onclick = hideMenu;  
  197. document.oncontextmenu = showMenu;  
  198. file://--> 
  199. </script> 
  200. </HEAD> 
  201. <body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0"> 
  202. <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="3"> 
  203. <tr><td valign="top"> 
  204. <div id="docBoard" style="width: 100%"> 
  205. 超酷的XP风格的网页右键菜单特效代码http://www.wangyeba.com  
  206. </div> 
  207. </td> 
  208. <td valign="top" align="right"> 
  209. <p><input type="checkbox" name="closerm" onclick="toggleMenu(!this.checked);">关闭右键菜单</p> 
  210. </td> 
  211. </tr> 
  212. </table> 
  213. </body> 
  214. </HTML> 

 

顶一下
(0)
0%
踩一下
(0)
0%
本站声明：本站文章，如无特别说明，均为转载或者节选自其他网站。
如本文内容侵犯了您的合法权益，请与责任编辑联系。谢谢合作！
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
发布者资料
飞雪鸿云 查看详细资料 发送留言 加为好友 用户等级:高级会员 注册时间:1970-01-01 08:01 最后登录:2009-09-24 21:09
热点文章
相关教程

关于我们 | 站点地图 | 广告服务 | 友情链接 | 论坛 | 沪ICP备05017900号

本站驻搜搜问问特派团队：网页制作新手营

Copyright © 2009-2010 菜鸟阵地