JavaScript CSS创建右击菜单效果代码
效果图:
css和javascript创建页面右键菜单
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;
}
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
右键菜单创建测试效果吧!
后退
前进
我们
photoshop教程
javascript
vbscript
软件下载
源码下载
正则表达式
联系我
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
代码解释:
1、 在页面载入时,先执行load1()方法
首先检验是不是IE浏览器,如果当前浏览器是Internet Explorer,document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5,当用户产生左键事件时就调用函数hidemenuie5。
2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。
当然,这里的菜单并不是真正意义的右键菜单,而是我们自己做的一个div,在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐,这就达到了使用鼠标右键一样的效果了。
这一块的最外层是一个id为ie5menu的div,我们定义了它的样式为skin0,你也可以根据自定义其他样式,然后替换skin0。
3、点击菜单选项后的操作
jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情,也就是执行选项