在一般的网页中,IE浏览器的默认右键菜单是一成不变的固定模式,大部分网友浏览网页时对它的利用率不高。对专业的网页设计师来说,如果能将右键菜单设计成个性化的内容,样式该是多么的酷和方便。
试想一下,用户在你的网站上一点右键,就是你精心组织的“链接”、“发信”,甚至包含了缤纷的交互式Flash动画!看看如何制作吧:
<style> <!-- .skin0 { position:absolute; text-align:left; width:200px; border:2px solid black; background-color:menu; font-family:Verdana; line-height:20px; cursor:default; visibility:hidden; } .skin1 { cursor:default; font:menutext; position:absolute; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width:120px; background-color:menu; border:1 solid buttonface; visibility:hidden; border:2 outset buttonhighlight; } .menuitems { padding-left:15px; padding-right:10px; } --> </style> <SCRIPT LANGUAGE="JavaScript1.2">
<!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin var menuskin = "skin1"; // skin0, or skin1 var display_url = 0; // Show URLs in status bar? 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"; } function highlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "highlight"; event.srcElement.style.color = "white"; if (display_url) window.status = event.srcElement.url; } } function lowlightie5() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = ""; event.srcElement.style.color = "black"; window.status = ""; } } function jumptoie5() { if (event.srcElement.className == "menuitems") { if (event.srcElement.getAttribute("target") != null) window.open(event.srcElement.url, event.srcElement.getAttribute("target")); else window.location = event.srcElement.url; } } // End --> </script> <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();"> <div class="menuitems" url="javascript:history.back();">返回</div> <div class="menuitems" url="http://www.webjx.com target=_blank">回首页</div> <hr> <div class="menuitems" url="http://www.163.com" target=_blank>网易</div> <div class="menuitems" url="http://www.sohu.com" target=_blank>搜狐</div> <hr> <div class="menuitems" url="http://www.sina.com.cn" target=_blank>新浪</div> <div class="menuitems" url="http://www.yahoo.com.cn" target=_blank>雅虎</div> </div> <script language="JavaScript1.2"> if (document.all && window.print) { ie5menu.className = menuskin; document.oncontextmenu = showmenuie5; document.body.onclick = hidemenuie5; } </script>
[Web开发]用PHP实现Javascript的escape(),unescape()的方法 [网页制作]Javascript获取各种浏览器可见窗口大小 [网页制作]Javascript 表单之间的数据传递 [网页制作]用 Javascript 写的一个映射表类 [网页制作]Javascript 编写的文字放大效果 [网页制作]在CSS样式表里使用JavaScript [网页制作]Javascript +CSS横向三级导航菜单 [网页制作]CSS+JavaScript打造超酷右键菜单 [网页制作]CSS+javascript特效赏析 [网页制作]javascript 对象与数组参考大全
|