CSS+JavaScript创建右击菜单

最新推荐文章于 2020-03-01 15:27:58 发布

iteye_13855

最新推荐文章于 2020-03-01 15:27:58 发布

阅读量303

点赞数

分类专栏： DHTML 文章标签： CSS JavaScript IE 浏览器软件测试 ViewUI

本文链接：https://blog.csdn.net/iteye_13855/article/details/81650365

版权

DHTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图：

[img]/upload/attachment/54567/c2eb9aa3-6f3c-330b-a168-c0cfa344d463.jpg[/img]


<%@ page language="java" pageEncoding="GBK" %>

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>css和javascript创建页面右键菜单</title>

<style type="text/css">

body {

    font-family: "宋体";

    font-size: 12px;

}



.skin0 {

    padding-top: 4px;

    text-align: left;

    width: 100px;

    border: 2px solid black;

    background-color: menu;

    font-family: "宋体";

    line-height: 20px;

    cursor: default;

    visibility: hidden;

}



.skin1 {

    padding-top: 4px;

    cursor: default;

    font: menutext;

    text-align: left;

    font-family: "宋体";

    font-size: 10pt;

    width: 100px;

    background-color: menu;

    border: 1 solid buttonface;

    visibility: hidden;

    border: 2 outset buttonhighlight;

}



</style>





<script language='javascript'> 

function load1(){

    if (document.all && window.print) {

       document.oncontextmenu = showmenuie5;

       document.onclick = hidemenuie5;

    }

}



function showmenuie5() {

  //获取当前鼠标右键按下后的位置，据此定义菜单显示的位置

  var rightedge = document.body.clientWidth-event.clientX;

  var bottomedge = document.body.clientHeight-event.clientY;



 //如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当//前鼠标位置向左一个菜单宽度

  if (rightedge <ie5menu.offsetWidth)

  ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;

   else     //否则，就定位菜单的左坐标为当前鼠标位置

   ie5menu.style.left = document.body.scrollLeft + event.clientX;



  //*如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度

   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";

} 



//jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

function jumptoie5() {

if (event.srcElement.getAttribute("target") != null)

window.open(event.srcElement.url, event.srcElement.getAttribute("target"));

else



window.location = event.srcElement.url;

} 



load1()

</script>

</head>



<body>

 右键菜单创建测试效果吧！
<div id="ie5menu" class="skin0">

<div  onclick="alert('后退请三思！)">后退</div>

<div  onclick="alert('祝你前程似锦，大胆往前走吧！')">前进</div>

<hr>

<div url="http://homepage.yesky.com" target="_blank" onclick="jumptoie5()">网页淘吧</div>

<div url="http://www.bewww.net/" target="_blank" onclick="jumptoie5()">速查手册</div>

<div url="http://wiki.mapbar.com/wiki2_0/edit.jsp?gid=1876" target="_blank" onclick="jumptoie5()">淘吧地图</div>

<div url="http://news.sohu.com/20081123/n260795459.shtml" target="_blank" onclick="jumptoie5()">征稿启事</div>

<hr>

<div url="http://soft.yesky.com" target="_blank" onclick="jumptoie5()">天极软件</div>

<div url="http://www.mydown.com/soft/" target="_blank" onclick="jumptoie5()">天极网站</div>

<hr>

<div url="http://liutao-2006-126-com.iteye.com" target="_blank" onclick="jumptoie5()">关于本站</div>

<div url="mailto:liutao_2006@126.com" onclick="jumptoie5()">联系我</div>

</div>　　
</body>
</html>

[b]代码解释：[/b]

[b] 1、在页面载入时，先执行load1()方法[/b]

首先检验是不是IE浏览器，如果当前浏览器是Internet Explorer，document.all就返回真。则下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数 showmenuie5，当用户产生左键事件时就调用函数hidemenuie5。

[b]2、接着我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。[/b]

当然，这里的菜单并不是真正意义的右键菜单，而是我们自己做的一个div，在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐，这就达到了使用鼠标右键一样的效果了。

这一块的最外层是一个id为ie5menu的div，我们定义了它的样式为skin0，你也可以根据自定义其他样式，然后替换skin0。

[b]3、点击菜单选项后的操作[/b]

jumptoie5()函数实现鼠标点击右键菜单中的层时发生的事情，也就是执行选项

iteye_13855

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS+JavaScript创建右击菜单

效果图：[img]/upload/attachment/54567/c2eb9aa3-6f3c-330b-a168-c0cfa344d463.jpg[/img][code="java"]css和javascript创建页面右键菜单body { font-family: "宋体"; font-size: ...
复制链接

扫一扫

专栏目录