js之自定義右鍵菜單
阿新 • • 發佈：2018-08-14
add 時鐘 type ref 留言板 back left 創建 cor .gif)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義右鍵菜單</title>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin: 0;
padding: 0;
}
body{
font-family:"Mrcrosoft Yahei",Arial;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
img{
border:none;
}
.menu{
width: 100px;
background: #9ff;
position: absolute;
left: -100%;
}
.uls li{
border-bottom: 1px solid black;
padding: 5px 0 0 5px;
border-right: 1px solid black;
border-left: 1px solid black;
}
.uls li:hover{
background:#f9f ;
}
.uls li:hover a{
color:#ff9 ;
}
.uls li:first-child{
border-top: 1px solid black;
}
.uls a{
display: block;
}
</style>
</head>
<body>
<!-- 書寫自定義菜單樣式 -->
<div class="menu">
<ul class="uls">
<li><a href="數碼時鐘.html">數碼時鐘</a></li>
<li><a href="留言板.html">留言板</a></li>
<li><a href="進度條.html">進度條</a></li>
<li><a href="隨機生成二維碼.html">二維碼</a></li>
<li><a href="吸頂效果.html">吸頂效果</a></li>
<li><a href="隔行換色.html">隔行換色</a></li>
</ul>
</div>
<script>
//嚴格模式
‘use strict‘;
//創建一個方法解決獲取類名時的兼容性問題
function byClassName(sClassName){
if(document.getElementsByClassName){
return document.getElementsByClassName(sClassName);
}else{
找到所有的元素
var allTagName = document.getElementsByTagName(‘*‘);
// 然後遍歷
var result = [];
for(var i = 0;i < allTagName.length; i++){
// 因為一個頁面中可能存在多個相同類名
if(allTagName[i].className ==sClassName){
result.push(allTagName[i]);
}
}return result;
}
}
var oMenu = byClassName(‘menu‘)[0];
document.oncontextmenu = function(ev){
// 獲取事件對象
var e = ev || window.event;
var iL = e.clientX,
iT = e.clientY;
oMenu.style.left = iL + ‘px‘;
oMenu.style.top = iT + ‘px‘;
// 當點擊瀏覽器任意地方時，讓菜單消失
document.onclick = function(){
oMenu.style.left = ‘-100%‘;
}
//阻止瀏覽器的默認行為
return false;
}
</script>
</body>
</html>
js之自定義右鍵菜單