js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了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>
www.jb51.net
<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程序设计有所帮助。
相关推荐
-
JS实现的自定义右键菜单实例二则
本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&
-
JS简单实现自定义右键菜单实例
RT,一个简单的例子,仅仅讲述原理 复制代码 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu> 假设我要把上面这个div设置为右键菜单,先随意美化一下. 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我
-
Js实现自定义右键行为
自定义右键行为(通过事件对象获得鼠标的坐标(x,y)) <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css"> html{ height:100%; } body{ height:100%; } #mydiv{ width:300px; heigh
-
javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta charset="gb2312" /> <title></title> <style> #menu{ border:solid 1px gray; width:100px; display:none; position:absolute; background-
-
js实现右键自定义菜单
本文实例为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gray; back
-
javascript自定义右键弹出菜单实现方法
本文实例讲述了javascript自定义右键弹出菜单实现方法.分享给大家供大家参考.具体实现方法如下: <head runat="server"> <title>无标题页</title> <script type="text/javascript"> var oPopup = window.createPopup(); function PopMenu(id) { var oPopBody = oPopup.docum
-
js自定义鼠标右键的实现原理及源码
今天来记录下js来自定义鼠标右键,同样先来分解下它的实现原理: 1.屏蔽右键默认事件:(一度我以为修改的就是默认事件) 2.对一个ul的隐藏:(这个我也曾迂腐的认为值得这样操作的都是div,汗) 3.对鼠标点击右键做出的响应,显示隐藏的ul: 4.鼠标重新点击后,ul重新被隐藏 这样来看的话,我们需要做的事情是不是就简单了很多,先上代码: html部分 <ul id="testRight" style="width: 100px;background-color: ye
-
JavaScript 对任意元素,自定义右键菜单的实现方法
一.一些概念: 1.鼠标事件有一个botton属性:返回一个整数,用于表示点击的是哪个鼠标按键. BUG:在IE和标准DOM的鼠标事件中,唯一一个button属性值相同的是"单击右键"事件,都返回2. 2.事件onmousedown:表示鼠标按键按下的动作. 事件oncontextmenu:点击鼠标触发的另一个事件. 3.中断默认事件处理函数的方法:IE中设置returnValue=false; 标准DOM中调用preventDefault()方法. 4.事件对象:①在IE中,事件对
-
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
本文实例讲述了js实现完全自定义可带多级目录的网页鼠标右键菜单方法.分享给大家供大家参考.具体分析如下: 这是很不错的一个网页鼠标特性,这个代码可以控制网页中鼠标的右键菜单,完全按照你的意思打造,可以带多级的目录显示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
-
php创建多级目录与级联删除文件的方法示例
本文实例讲述了php创建多级目录与级联删除文件的方法.分享给大家供大家参考,具体如下: 创建多级目录 mkdir函数只能创建一级的目录,如果我们想创建多级目录,则需要自己编写函数. <?php $path = "one/two/three/four"; function mkdir_p($path,$mode=0700){ $arr = explode("/",$path); $path = ''; foreach($arr as $v){ $path .=
-
JQuery模拟实现网页中自定义鼠标右键菜单功能
前言 题外话.......最近在开发一个网站项目的时候,需要用到网页自定义右键菜单,在网上看了各路前辈大神的操作,头晕目眩,为了达到目的,突然灵机一动,于是便有了这篇文章. 先放个效果图(沾沾自喜,大神勿喷): 废话不多说,进入正题: 1.首先 我们要禁用掉原网页中右键菜单 //JQuery代码 $(selector).on('contextmenu', function () { return false; }) 这样目标区域的右键菜单就无法使用了 demo1: <!DOCTYPE html>
-
JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 编码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> window.onload = function(){ var menu = document.
-
javascript局部自定义鼠标右键菜单
本文实例为大家分享了js局部自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下 前言 html局部自定义鼠标右键菜单 局部! 局部! 局部! 重要的关键词说三遍! 一.效果展示 二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #Te
-
javascript全局自定义鼠标右键菜单
本文实例为大家分享了javascript全局自定义鼠标右键菜单的具体代码,供大家参考,具体内容如下 前言 html全局自定义鼠标右键菜单 一.效果展示 二.源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #TextBox{ width: 2
-
两种JS实现屏蔽鼠标右键的方法
JS屏蔽鼠标右键的两种方法,比较常用的一个JS小功能,用上这个代码后,浏览者在访问你网页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要用的太多哦,有时候用户会反感的. 代码如下: <html> <head> <title>屏蔽鼠标右键</title> </head> <body oncontextmenu=self.event.returnvalue=false> 第一种方法:在body标签里加上oncontextme
-
js捕获鼠标右键菜单中的粘帖事件实现代码
比如点击菜单中的"粘帖"后事件如何捕获 问题解决了! 用的jQuery中的paste事件,这里需要注意,如想获得粘帖文本要使用setTimeout控制下时间. 复制代码 代码如下: $("#input").bind('paste', function(e) { var el = $(this); setTimeout(function() { var text = $(el).val(); alert(text); }, 100); }); 貌似是在1.4版后加上
-
jquery实现在网页指定区域显示自定义右键菜单效果
本文实例讲述了jquery实现在网页指定区域显示自定义右键菜单效果.分享给大家供大家参考.具体如下: 这是一个jquery实现的网页右键菜单效果,与其它自定义的右键菜单不同之处在于,本菜单只在指定区域内才有效,若超出指定区域的话,点击右键后显示的仍是浏览器的右键菜单.运行效果后,请在橘色区域内点击鼠标右键,会弹出一个带图标的自定义右键菜单,和浏览器的右键菜单完全不一样哦! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-web-ar