脚本说明:
把如下代码加入<body>区域中
<style>
<!--
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript1.2">
<!-- Web Site: http://www.painting-effects.co.uk -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
function highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
function jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
else
window.location = event.srcElement.url;
}
}
// End -->
</script>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
<div class="menuitems" url="javascript:history.back();">返回</div>
<div class="menuitems" url="http://javacool.3322.net">回首页</div>
<hr>
<div class="menuitems" url="http://www.163.com">网易</div>
<div class="menuitems" url="http://www.sohu.com">搜狐</div>
<hr>
<div class="menuitems" url="http://www.sina.com.cn">新浪</div>
<div class="menuitems" url="http://www.yahoo.com.cn">雅虎</div>
</div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
分享到：
相关推荐
一、JavaScript右键菜单的基本原理 在网页上，右键点击事件通常是浏览器默认行为的一部分，如选择文字或打开上下文菜单。然而，通过JavaScript，我们可以自定义这个行为，创建一个完全符合我们设计需求的右键菜单。...
总的来说，这个项目利用JavaScript实现了鼠标右键点击弹出QQ在线客服的功能，旨在提高网站的用户交互性，通过合理的事件监听和DOM操作，以及对浏览器兼容性的考虑，使得这个功能可以在主流浏览器中顺畅运行。
首先，让我们来看一下如何使用原生JavaScript来处理右键点击事件。我们可以为任何元素添加`contextmenu`事件监听器： ```javascript document.getElementById('yourElementId').addEventListener('contextmenu', ...
js 特效 html 特效 鼠标右键新效果 js 特效 html 特效 鼠标右键新效果
通过监听鼠标事件，如`contextmenu`（右键点击），我们可以阻止浏览器显示默认菜单，然后动态创建并显示我们自己的菜单。JavaScript可以创建HTML元素，如`<ul>`和`<li>`，用于构建菜单结构，并通过CSS进行样式设置，...
jQuery右键点击下拉菜单插件是Web开发中一种便捷的交互增强工具，它利用了流行的Bootstrap框架中的下拉菜单组件。Bootstrap是一个广泛使用的前端框架，提供了丰富的UI组件，包括响应式的布局、导航条、模态框等，而...
在JavaScript中，我们可以监听`contextmenu`事件来捕获鼠标右键点击。这个事件在用户右键点击时触发。以下是一个简单的示例： ```javascript document.addEventListener('contextmenu', function(event) { event....
在HTML+JavaScript右键菜单的实现中，JSP可能被用作后端服务，处理与菜单相关的数据请求或逻辑，例如根据用户状态或权限动态生成菜单项。 实现步骤如下： 1. 创建HTML结构：在HTML文件中，定义一个用于存放菜单的...
1. **事件监听**：首先，我们需要监听鼠标右键点击事件。在HTML元素上添加`contextmenu`事件监听器。例如，如果要在一个div元素上添加右键菜单，可以这样做： ```javascript document.getElementById('...
### JavaScript右键菜单知识点解析 #### 一、项目概述 本项目主要介绍了一种通过JavaScript实现的右键菜单功能，该功能旨在为用户提供一个便捷、实用的上下文菜单选项。菜单项包括创建、修改和删除等功能，用户可以...
- 在网页上，右键点击通常触发浏览器的默认上下文菜单，如“复制”、“粘贴”等。要自定义右键菜单，我们需要阻止浏览器的默认行为，然后创建并显示自定义菜单。这可以通过监听`contextmenu`事件来实现。在事件...
### JS右键菜单效果代码详解 #### 一、概述 本文档将详细介绍如何利用JavaScript创建一个自定义的右键菜单效果。此功能适用于需要增强用户体验的Web应用或网站，允许用户通过右键点击来触发一系列预设操作。下面将...
"jQuery鼠标右键点击弹出菜单"是一个基于jQuery实现的功能，它结合了Bootstrap 3.3.6这一强大的前端框架，为用户提供了一种在页面上通过鼠标右键点击来触发自定义菜单的交互体验。 Bootstrap是Twitter推出的一个...
在JavaScript中，我们可以监听用户的鼠标事件，如`contextmenu`事件，这个事件会在用户执行右键点击时触发。我们可以阻止浏览器默认的右键菜单显示，然后自定义我们的弹出式菜单。 ```javascript document....
js自定义右键菜单是一款在网页中右击鼠标，弹窗类似windows桌面上鼠标右击效果，空白处点击右键会有相应的内容弹出。 js自定义右键菜单效果图一： 点击查看演示 js自定义右键菜单效果图二：
1. **事件监听**：首先，我们需要监听鼠标的右键点击事件。在JavaScript中，我们可以通过`addEventListener`方法来添加事件监听器。对于右键点击，我们关注的是`contextmenu`事件。例如： ```javascript document...
在实现这个功能时，开发者通常会使用JavaScript或者jQuery等库来处理用户的右键点击事件，并动态创建和展示菜单。同时，CSS用于定义菜单的样式和交互效果，如动画过渡、悬停状态等。这样的技术结合，既确保了功能的...
《jQuery右键点击指定区域下拉菜单代码》 在网页开发中，为了提供更好的用户体验，开发者经常需要实现一些交互性的功能，例如右键点击事件。jQuery作为一种强大的JavaScript库，简化了DOM操作，使得实现这样的功能...
在JavaScript中，我们可以利用DOM（Document Object Model）来创建和操作这些节点，通过遍历和修改DOM结构来实现树形菜单的动态效果。例如，通过添加、删除或改变节点的class属性，我们可以控制节点的可见性，实现...