右键美化-仿百度网盘右键

右键美化-仿百度网盘右键,只有效果没有功能,等后面完善,国际惯例上代码

效果(右键点击黑框内部)


 

 

Html




<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>右键美化-仿百度网盘右键 www.big-culture.com</title>

</head>
<body>
<h1>www.big-culture.com </h1>
<!--右键菜单开始-->
<menu>
<li>打开(O)</li>
<li>下载</li>
<li></li>
<li>推送到设备</li>
<li></li>
<li>分享(S)</li>
<li></li>
<li>复制到</li>
<li>移动到</li>
<li></li>
<li>重命名</li>
<li>删除</li>
<li>历史版本</li>
</menu>
<!--右键菜单结束-->

</body>
</html>

Css




/*全局样式*/
*{margin:0;padding:0;}
ul,ol,menu{list-style:none;}
a{text-decoration:none;}
button,input{border: none;}
button{cursor: pointer;}
img{vertical-align:middle;border:none;}
body{font-family:Arial, "微软雅黑";}
/*右键弹出的样式*/
menu{position: absolute; font-size: 16px;width:114px; border: 1px solid #dde0e4;box-shadow: 0 0 8px #ccc;top: 0;left: 0;border-radius: 5px;display: none;padding: 2px 0;}
menu>li{line-height: 23px; padding: 0 10px;text-align:left;color: #5b667b!important;padding: 0 27px 0 20px;font-size: 14px;}
menu>li:hover{background-color: #4281F4;color: #fff!important;}
menu>li:last-child{border-bottom: none;}
menu>li:nth-of-type(3),menu>li:nth-of-type(5),menu>li:nth-of-type(7),menu>li:nth-of-type(10){padding: 0;margin: 5px 0;width: 100%;height: 1px;line-height: 0;font-size: 0!important;background-color: #e9e9e9;
cursor: default;}
menu>li:last-child{color:#A1A192!important;pointer-events: none}

h1{width: 100%;text-align: center;color: red;}

Js


 var menu=document.getElementsByTagName("menu")[0];

document.addEventListener("contextmenu",function(chuxian){

// 取消事件的默认动作。

chuxian.preventDefault();
// 获取返回当事件被触发时鼠标指针向对于浏览器页面的水平坐标
var left=chuxian.clientX;
var top=chuxian.clientY;
menu.style.cssText="display:block;left:"+left+"px;top:"+top+"px";
})
document.addEventListener("click",function(){
menu.style.display="none";

}) 

未经允许不得转载:绿岛小站 » 右键美化-仿百度网盘右键

赞 (6)

评论 0

评论前必须登录!

登陆 注册