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 建立对象的方法
Apr 21 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
React实现动效弹窗组件
Jun 21 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue组件之Alert的实现代码
2017/10/17 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python的互斥锁与信号量详解
2019/09/12 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
3分钟演讲稿
2014/04/30 职场文书
会计学专业求职信
2014/07/17 职场文书
员工手册董事长致辞
2015/07/29 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书