自定义html页面鼠标右键,自定义鼠标右键菜单.html

Document

body{

font-size: 16px;

}

ul{

list-style: none;

margin: 0;padding: 0;

}

a{

text-decoration: none;

color: #333;

}

.contextmenu{

width: 200px;

border: 1px solid #999;

box-shadow: 3px 3px 3px #ccc;

background: #fff;

position: absolute;

top: 10px;

left: 10px;

display: none;

}

.contextmenu li {

height: 38px;

line-height: 38px;

}

.contextmenu li a{

display: block;

padding: 0 20px;

}

@media print{

.contextmenu{

opacity: 0;

}

}

• 复制
• 剪切
• 粘贴
• 返回
• 前进
• 刷新
• 打印
• 另存为

// var content = document.getElementById('content');

document.oncontextmenu = function(even){

var e = even || window.event;

var content = document.getElementById('content');

content.style.display = 'block';

var x = e.clientX;

var y = e.clientY;

var w = window.innerWidth;

var h = window.innerHeight;

content.style.left = Math.min(w-202,x)+"px";

content.style.top = Math.min(h-312,y)+"px";

return false;

}

var list = document.getElementById('content').getElementsByTagName('li');

for(var i = 0; i < list.length; i++){

list[i].onmouseover = function(){

this.style.background = "#ccc";

}

list[i].onmouseout = function(){

this.style.background = '#fff';

}

}

document.onclick = function(){

document.getElementById('content').style.display = "none";

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史