<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>temp</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
div.box{
display: none;
width: 0px;
background-color: #376956;;
text-align: center;
overflow: hidden;
/*不用动画
transition: width 0.2s;
-webkit-transition: width 0.2s;*/
}
div.box ul{
padding: 0;
margin: 0;
}
div.box li{
display: block;
list-style: none;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="javascript:void(0);">增加</a></li>
<li><a href="javascript:void(0);">删除</a></li>
<li><a href="javascript:void(0);">修改</a></li>
<li><a href="javascript:void(0);">查询</a></li>
<li><a href="javascript:void(0);">进入</a></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
document.body.addEventListener("contextmenu",function(event){
var div = document.getElementsByClassName("box")[0];
event.preventDefault? event.preventDefault() : window.event.returnValue = false;
var pointx = event.clientX;
var pointy = event.clientY;
div.style.position = "fixed";
div.style.top = pointy+"px";
div.style.left = pointx+"px";
div.style.width = "0px";
div.style.display = "block";
/*setTimeout(function(){
div.style.width = "100px";
},100);*/
});
window.addEventListener("click",function(event){
var div = document.getElementsByClassName("box")[0];
div.style.display = "none";
});
};
</script>
</body>
</html>
结果
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
