js bagi menu klik kanan halaman web yang disesuaikan sepenuhnya dengan kemahiran directories_javascript berbilang peringkat

Contoh dalam artikel ini menerangkan kaedah js untuk melaksanakan menu klik kanan halaman web yang disesuaikan sepenuhnya dengan direktori berbilang peringkat. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Ini adalah ciri tetikus web yang sangat baik Kod ini boleh mengawal menu klik kanan tetikus pada halaman web Ia dibina sepenuhnya mengikut kehendak anda dan boleh memaparkan direktori berbilang peringkat.

Salin kod Kod adalah seperti berikut: JS自定义网页多级导航菜单 html,badan{ketinggian:100%;limpahan:tersembunyi;} body,div,ul,li{margin:0;padding:0;} badan{font:12px/1.5 5fae8f6f96c59ed1;} ul{list-style-type:none;} #rightMenu{position:absolute;top:-9999px;left:-9999px;} #rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(images/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0, 0,.6);} #rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;} #rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow.png);} #rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px; } #rightMenu ul ul{display:none;position:absolute;} var getOffset = { atas: fungsi (obj) { kembalikan obj.offsetTop (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) }, kiri: fungsi (obj) { kembalikan obj.offsetLeft (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) } }; window.onload = fungsi () { var oMenu = document.getElementById("rightMenu"); var aUl = oMenu.getElementsByTagName("ul"); var aLi = oMenu.getElementsByTagName("li"); var showTimer = hideTimer = null; var i = 0; var maxWidth = maxHeight = 0; var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight]; oMenu.style.display = "tiada"; untuk (i = 0; i { //为含有子菜单的li加上箭头 aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub"); //鼠标移入 aLi[i].onmouseover = fungsi () { var oThis = ini; var oUl = oThis.getElementsByTagName("ul"); //鼠标移入样式 oThis.className = " aktif"; //显示子菜单 jika (oUl[0]) { clearTimeout(hideTimer); showTimer = setTimeout(fungsi () { untuk (i = 0; i { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } oUl[0].style.display = "block"; oUl[0].style.top = oThis.offsetTop "px"; oUl[0].style.left = oThis.offsetWidth "px"; setWidth(oUl[0]); //最大显示范围 maxWidth = aDoc[0] - oUl[0].offsetWidth; maxHeight = aDoc[1] - oUl[0].offsetHeight; //防止溢出 maxWidth maxHeight },300); } }; //鼠标移出 aLi[i].onmouseout = fungsi () { var oThis = ini; var oUl = oThis.getElementsByTagName("ul"); //鼠标移出样式 oThis.className = oThis.className.replace(/s?active/,""); clearTimeout(showTimer); hideTimer = setTimeout(fungsi () { untuk (i = 0; i { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } },300); }; } //自定义右键菜单 document.oncontextmenu = fungsi (peristiwa) { var acara = acara || tingkap.acara; oMenu.style.display = "block"; oMenu.style.top = event.clientY "px"; oMenu.style.left = event.clientX "px"; setWidth(aUl[0]); //最大显示范围 maxWidth = aDoc[0] - oMenu.offsetWidth; maxHeight = aDoc[1] - oMenu.offsetHeight; //防止菜单溢出 oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight "px"); oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth "px"); pulangkan palsu; }; //点击隐藏菜单 document.onclick = fungsi () { oMenu.style.display = "tiada" }; //取li中最大的宽度, 并赋给同级所有li fungsi setWidth(obj) { maxWidth = 0; untuk (i = 0; i { var oLi = obj.kanak-kanak[i]; var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2 jika (iWidth > maxWidth) maxWidth = iWidth; } untuk (i = 0; i } }; Untuk menyesuaikan menu klik kanan, sila klik kanan pada halaman untuk melihat kesannya. Pembelajaran JavaScript Rumah Skrip Analisis prinsip kesan khas web Tindak balas kepada operasi pengguna Kesan kotak gesaan Didorong oleh peristiwa Operasi atribut elemen www.jb51.net Tukar warna latar belakang halaman web Parameter fungsi Menulis fungsi kebolehgunaan tinggi Kesan memilih semua 126 peti mel Operasi gelung dan lintasan Pelajaran 3 Komposisi JavaScript ECMAScript DOM BOM Sumber Keserasian JavaScript Lokasi, kelebihan dan keburukan JavaScript Pembolehubah, jenis, jenis, penukaran jenis data, skop pembolehubah Penutupan Apakah itu penutupan Aplikasi mudah Kelemahan penutupan Operator Kawalan aliran program Cara menggunakan pemasa setInterval setTimeout Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.