这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
效果图:
右击菜单效果
[Ctrl+A 全选 注:
- <!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
- <html>
- <head>
- <title>CSS和javascript创建页面右键菜单</title>
- <style type="text/css">
- body {
- font-family: "宋体";
- font-size: 12px;
- }
- .skin0 {
- padding-top: 4px;
- text-align: left;
- width: 100px;
- border: 2px solid black;
- background-color: menu;
- font-family: "宋体";
- line-height: 20px;
- cursor: default;
- visibility: hidden;
- }
- .skin1 {
- padding-top: 4px;
- cursor: default;
- font: menutext;
- text-align: left;
- font-family: "宋体";
- font-size: 10pt;
- width: 100px;
- background-color: menu;
- border: 1 solid buttonface;
- visibility: hidden;
- border: 2 outset buttonhighlight;
- }
- </style>
- <script language='javascript'>
- function load1(){
- if (document.all && window.print) {
- document.oncontextmenu = showmenuie5;
- document.onclick = hidemenuie5;
- }
- }
- function showmenuie5() {
- //获取当前鼠标右键按下后的位置,据此定义菜单显示的位置
- var rightedge = document.body.clientWidth-event.clientX;
- var bottomedge = document.body.clientHeight-event.clientY;
- //如果从鼠标位置到窗口右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当//前鼠标位置向左一个菜单宽度
- if (rightedge <ie5menu.offsetWidth)
- ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
- else //否则,就定位菜单的左坐标为当前鼠标位置
- ie5menu.style.left = document.body.scrollLeft + event.clientX;
- //*如果从鼠标位置到窗口下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度
- 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";
- }
- //jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项
- function jumptoie5() {
- if (event.srcElement.getAttribute("target") != null)
- window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
- else
- window.location = event.srcElement.url;
- }
- load1()
- </script>
- </head>
- <body>
- 右键菜单创建测试效果吧!
- <div>
- <div onclick="alert('后退请三思!)">后退</div>
- <div onclick="alert('祝你前程似锦,大胆往前走吧!')">前进</div>
- <hr>
- <div url="http://www.jb51.net" target="_blank" onclick="jumptoie5()">phperz</div>
- <div url="http://www.jb51.net/photoshop/" target="_blank" onclick="jumptoie5()">photoshop教程</div>
- <div url="http://www.jb51.net/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">javascript</div>
- <div url="http://www.jb51.net/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">vbscript</div>
- <hr>
- <div url="http://www.jb51.net/softs/index.html" target="_blank" onclick="jumptoie5()">软件下载</div>
- <div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">源码下载</div>
- <hr>
- <div url="http://www.jb51.net/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">正则表达式</div>
- <div url="http://www.jb51.net/support.htm" onclick="jumptoie5()">联系我</div>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]代码解释: 1、 在页面载入时,先执行 load1() 方法 首先检验是不是 IE 浏览器,如果当前浏览器是 Internet Explorer,document.all 就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是 IE 的时候那么当用户产生右键事件时就调用函数 showmenuie5,当用户产生左键事件时就调用函数 hidemenuie5。 2、接着我们要考虑如何通过函数 showmenuie5 和函数 hidemenuie5 来实现菜单的显示和隐藏。 当然,这里的菜单并不是真正意义的右键菜单,而是我们自己做的一个 div,在这个 div 中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐,这就达到了使用鼠标右键一样的效果了。 这一块的最外层是一个 id 为 ie5menu 的 div,我们定义了它的样式为 skin0,你也可以根据自定义其他样式,然后替换 skin0。 3、点击菜单选项后的操作 jumptoie5() 函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项
来源: http://www.phperz.com/article/17/0422/287690.html