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 相关文章推荐
Jquery操作js数组及对象示例代码
May 11 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
Vue Router中应用中间件的方法
Aug 06 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
phpmyadmin的#1251问题
2006/11/25 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
Django中的CBV和FBV示例介绍
2018/02/25 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
大专计算机个人求职的自我评价
2013/10/21 职场文书
应届毕业生自我评价分享
2013/12/15 职场文书
电视节目策划方案
2014/05/16 职场文书
银行求职信
2014/05/31 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
初级职称评定工作总结
2015/08/13 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL