JavaScript CSS创建右击菜单效果代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript CSS创建右击菜单效果代码

Javascript: 如何用js控制css中的float的代码; Autocomplete Textbox Example javascript实现自动完成成功; FormValid0.5版本发布，带ajax自定义验证例子; wordpress之js库集合研究介绍; 推荐发几个常用控件(新加DHTML控件); 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件); javascript下阻止表单重复提交、防刷新、防后退; javascript下计数器每秒自动加1; 给所有的超级练级都加上onmousemove时间的js代码; js实现运行代码需要刷新的解决方法; 兼容FF/IE跟随鼠标的层的效果; 用javascript获得css中的属性值的代码; 用javascript实现页内搜索的脚本代码; 用javascript 控制表格行的展开和隐藏的代码; 用javascript实现隐藏状态栏的代码; Code:　write(s,d) 输出连续字符串; javascript创建页面蒙板的一些知识技巧总结; 转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K; 用javascript判断输入数据是否货币并自动添加￥符号的代码; js类中获取外部函数名的方法

No. « ‹ 79 80 81 82 › »

技术文章搜索

关键字

Javascript 中的 JavaScript CSS创建右击菜单效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 389 ::

收藏到网摘: n/a

[原创]关键字空格替换为逗号的js代码 js调试工具 Javascript Debug Toolkit 2.0.0版本发布

右击菜单效果效果图：

点击运行可以看到效果:

<!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 id="ie5menu" class="skin0">
<div onclick="alert('后退请三思！)">后退</div>
<div onclick="alert('祝你前程似锦，大胆往前走吧！')">前进</div>
<hr>
<div url="http://www.ruanchen.com" target="_blank" onclick="jumptoie5()">软晨学习网</div>
<div url="http://www.ruanchen.com/" target="_blank" onclick="jumptoie5()">photoshop教程</div>
<div url="http://www.ruanchen.com/" target="_blank" onclick="jumptoie5()">javascript</div>
<div url="http://www.ruanchen.com/" target="_blank" onclick="jumptoie5()">vbscript</div>
<hr>
<div url="http://www.ruanchen.com/" target="_blank" onclick="jumptoie5()">软件下载</div>
<div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">源码下载</div>
<hr>
<div url="http://www.ruanchen.com/" target="_blank" onclick="jumptoie5()"><a href="http://www.ruanchen.com/" style="color: #000">正则</a>表达式</div>
<div url="http://www.ruanchen.com/" onclick="jumptoie5()">联系我</div>
</div>　　
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

代码解释：
1、在页面载入时，先执行load1()方法
首先检验是不是IE浏览器，如果当前浏览器是Internet Explorer，document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。
2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。
当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。
这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，你也可以根据自定义其他样式，然后替换skin0。
3、点击菜单选项后的操作
jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

[原创]关键字空格替换为逗号的js代码 js调试工具 Javascript Debug Toolkit 2.0.0版本发布

Javascript 中的 JavaScript CSS创建右击菜单效果代码

评论 (0) All