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 相关文章推荐
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 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 面向对象的一个例子
2011/04/12 PHP
php 获取本地IP代码
2013/06/23 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
Extjs让combobox写起来简洁又漂亮
2017/01/05 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
小程序采集录音并上传到后台
2019/11/22 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
python利用tkinter实现屏保
2019/07/30 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
企业内控岗位的职责
2014/02/07 职场文书
初中生毕业评语
2014/12/29 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015最新民情日记范文
2015/06/26 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android