JS 右键自定义菜单
JS右键自定义菜单,上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin:0px; padding: 0px; } #div1{ width: 80px; height: 100px; background: #ff00ff; opacity: 0; position: absolute; } #div1 ul li{ list-style: none; height: 20px; text-align: center; line-height: 25px; margin-top: 5px; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-webkit-transition-duration:0.5s; } #div1 ul li:hover{ background: #000000; color: #ffffff; } </style> <script> function getpos(ev){ var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var scrollleft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollleft,y:ev.clientY+scrolltop} } window.onload=function(){ var odiv1=document.getElementById("div1"); document.oncontextmenu=function(ev){ var eventr=ev||event; var pos=getpos(eventr); odiv1.style.top=pos.y+"px"; odiv1.style.left=pos.x+"px"; odiv1.style["display"]="block"; return false; } document.onclick=function(){ odiv1.style["display"]="none"; } } </script> </head> <body style="height:2000px;"> <div id="div1"> <ul> <li>菜单1</li> <li>菜单2</li> <li>菜单3</li> <li>菜单4</li> </ul> </div> </body> </html>