您的位置：首页 > Web前端 > JavaScript

JS 右键自定义菜单

2014-05-06 10:27 169 查看

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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding: 0px;
}
#div1{
width: 80px;
height: 100px;
background: #ff00ff;
opacity: 0;
position: absolute;
}
#div1 ul li{
list-style: none;
height: 20px;
text-align: center;
line-height: 25px;
margin-top: 5px;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-moz-webkit-transition-duration:0.5s;
}
#div1 ul li:hover{
background: #000000;
color: #ffffff;
}
</style>
<script>
function getpos(ev){
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop}

}
window.onload=function(){
var odiv1=document.getElementById("div1");
document.oncontextmenu=function(ev){
var eventr=ev||event;
var pos=getpos(eventr);
odiv1.style.top=pos.y+"px";
odiv1.style.left=pos.x+"px";
odiv1.style["display"]="block";
return false;
}
document.onclick=function(){
odiv1.style["display"]="none";
}
}
</script>
</head>
<body style="height:2000px;">
<div id="div1">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航