js实现完全自定义可带多级目录的网页鼠标右键菜单方法


Posted in Javascript onFebruary 28, 2015

本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法。分享给大家供大家参考。具体分析如下:

这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JS自定义网页多级导航菜单</title>

<style type="text/css">

html,body{height:100%;overflow:hidden;}

body,div,ul,li{margin:0;padding:0;}

body{font:12px/1.5 \5fae\8f6f\96c5\9ed1;}

ul{list-style-type:none;}

#rightMenu{position:absolute;top:-9999px;left:-9999px;}

#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(images/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}

#rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}

#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow.png);}

#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}

#rightMenu ul ul{display:none;position:absolute;}

</style>

<script type="text/javascript">

var getOffset = {

top: function (obj) {

return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)

},

left: function (obj) {

return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)

}

};

window.onload = function ()

{

var oMenu = document.getElementById("rightMenu");

var aUl = oMenu.getElementsByTagName("ul");

var aLi = oMenu.getElementsByTagName("li");

var showTimer = hideTimer = null;

var i = 0;

var maxWidth = maxHeight = 0;

var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];

oMenu.style.display = "none";

for (i = 0; i < aLi.length; i++)

{

//为含有子菜单的li加上箭头

aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");

//鼠标移入

aLi[i].onmouseover = function ()

{

var oThis = this;

var oUl = oThis.getElementsByTagName("ul");

//鼠标移入样式

oThis.className += " active";

//显示子菜单

if (oUl[0])

{

clearTimeout(hideTimer);

showTimer = setTimeout(function ()

{

for (i = 0; i < oThis.parentNode.children.length; i++)

{

oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&

(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");

}

oUl[0].style.display = "block";

oUl[0].style.top = oThis.offsetTop + "px";

oUl[0].style.left = oThis.offsetWidth + "px";

setWidth(oUl[0]);

//最大显示范围

maxWidth = aDoc[0] - oUl[0].offsetWidth;

maxHeight = aDoc[1] - oUl[0].offsetHeight;

//防止溢出

maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");

maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")

},300);

}

};

//鼠标移出

aLi[i].onmouseout = function ()

{

var oThis = this;

var oUl = oThis.getElementsByTagName("ul");

//鼠标移出样式

oThis.className = oThis.className.replace(/\s?active/,"");

clearTimeout(showTimer);

hideTimer = setTimeout(function ()

{

for (i = 0; i < oThis.parentNode.children.length; i++)

{

oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&

(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");

}

},300);

};

}

//自定义右键菜单

document.oncontextmenu = function (event)

{

var event = event || window.event;

oMenu.style.display = "block";

oMenu.style.top = event.clientY + "px";

oMenu.style.left = event.clientX + "px";

setWidth(aUl[0]);

//最大显示范围

maxWidth = aDoc[0] - oMenu.offsetWidth;

maxHeight = aDoc[1] - oMenu.offsetHeight;

//防止菜单溢出

oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");

oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");

return false;

};

//点击隐藏菜单

document.onclick = function ()

{

oMenu.style.display = "none"

};

//取li中最大的宽度, 并赋给同级所有li

function setWidth(obj)

{

maxWidth = 0;

for (i = 0; i < obj.children.length; i++)

{

var oLi = obj.children[i];

var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2

if (iWidth > maxWidth) maxWidth = iWidth;

}

for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";

}

};

</script>

</head>

<body>

<center>自定义右键菜单,请在页面点击右键查看效果。</center>

<div id="rightMenu">

<ul>

<li><strong>JavaScript 学习</strong></li>

<li>

三水点靠木

<ul>

<li>网页特效原理分析</li>

<li>响应用户操作</li>

<li>提示框效果</li>

<li>事件驱动</li>

<li>元素属性操作</li>

</ul>

</li>

<li>

3water.com

<ul>

<li>改变网页背景颜色</li>

<li>函数传参</li>

<li>高重用性函数的编写</li>

<li>126邮箱全选效果</li>

<li>循环及遍历操作</li>

</ul>

</li>

<li>

第三课

<ul>

<li>

JavaScript组成

<ul>

<li>ECMAScript</li>

<li>DOM</li>

<li>BOM</li>

<li>JavaScript兼容性来源</li>

</ul>

</li>

<li>JavaScript出现的位置、优缺点</li>

<li>变量、类型、typeof、数据类型转换、变量作用域</li>

<li>

闭包

<ul>

<li>什么是闭包</li>

<li>简单应用</li>

<li>闭包缺点</li>

</ul>

</li>

<li>运算符</li>

<li>程序流程控制</li>

<li>

定时器的使用

<ul>

<li>setInterval</li>

<li>setTimeout</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
javascript表格的渲染组件
Jul 03 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 #Javascript
js获取当前日期前七天的方法
Feb 28 #Javascript
JQuery的ON()方法支持的所有事件罗列
Feb 28 #Javascript
使用命令对象代替switch语句的写法示例
Feb 28 #Javascript
Underscore.js常用方法总结
Feb 28 #Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 #Javascript
jQuery实现tab标签自动切换的方法
Feb 28 #Javascript
You might like
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
微信小程序实现轮播图效果
2017/09/07 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python远程登录代码
2008/04/29 Python
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
在Python中使用元类的教程
2015/04/28 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
常见python正则用法的简单实例
2016/06/21 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
详解Python IO口多路复用
2020/06/17 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
数据库专业英语
2012/11/30 面试题
物业公司采购员岗位职责
2013/12/31 职场文书
三年级音乐教学反思
2014/01/28 职场文书
银行简历自我评价
2014/02/11 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle