<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content=" " />
<meta name="copyright" content="来自 和派孔明——高级前端工程师" />
<title>来自 和派孔明——高级前端工程师</title>
<style>
* {margin:0; padding:0; list-style:none;}
#ul1 li {width:400px; background:#CCC; border:1px solid black; margin:10px; float:left; line-height:30px; text-indent:1em;}
#menu {width:150px; border:1px solid black; border:1px solid black; position:absolute; left:0; top:0; display:none; background:white;}
#menu li {padding:3px;}
#menu li:hover {background:#CCC;}
</style>
<script>
window.οnlοad=function(){
var oM=document.getElementById('menu');
var aLi=oM.children;
var oUl=document.getElementById('ul1');
var aLi1=oUl.children;
var _this=null;
for(var i=0;i<aLi1.length;i++){
aLi1[i].οncοntextmenu=function(ev){
_this=this;
var oEvt=ev||event;
oM.style.display='block';
oM.style.left=oEvt.clientX+'px';
oM.style.top=oEvt.clientY+'px';
return false;
}
}
aLi[0].οnclick=function(){
oUl.removeChild(_this);
}
aLi[1].οnclick=function(){
_this.style.background='red';
}
aLi[2].οnclick=function(){
_this.style.background='green';
}
aLi[3].οnclick=function(){
_this.style.background='yellow';
}
aLi[4].οnclick=function(){
_this.style.background='blue';
}
document.οnclick=function(){
oM.style.display='none';
};
};
</script>
</head>
<body>
<ul id="menu">
<li>删除</li>
<li>变成红色</li>
<li>变成绿色</li>
<li>变成黄色</li>
<li>变成蓝色</li>
</ul>
<ul id="ul1">
<li>不知道</li>
<li>不清楚</li>
<li>不明白</li>
<li>没听说过</li>
<li>问问别人</li>
<li>前方左转</li>
<li>什么啊</li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
