js之自定義右鍵菜單
阿新 • • 發佈:2018-08-14
add 時鐘 type ref 留言板 back left 創建 cor
<!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之自定義右鍵菜單