MENU.JS // 菜单的HTML代码 var strMenu = "<div id=\"menu\" class=\"clsMenu\" onMouseover=\"highlight()\" onMouseout=\"lowlight()\">" strMenu += "<div class=\"menuitems\" onClick=\"javascript:location.href=http://www.tf163.com\">刷新</div>" strMenu += "<div class=\"menuitems\" onClick=\"javascript:location.href=http://www.tf163.com\">关闭</div>" strMenu += "<hr>" strMenu += "<div class=\"menuitems\" onClick=\"this.style.behavior=url(#default#homepage);this.setHomePage(http://fj126.net);\" >设为首页</div>" strMenu += "<div class=\"menuitems\" onClick=\"javascript:window.external.AddFavorite(http://fj126.net/, .::蓝雨设计网::.)\">加入收藏</div>" strMenu += "</div>" // 判断客户端浏览器 function ie() { if (navigator.appName=="Microsoft Internet Explorer") { return true; } else { return false; }} // 显示菜单 function showmenu(){ if (ie()){ // 找出鼠标在窗口中的位置 var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY // 如果横向的距离小于菜单的宽度 if (rightedge<menu.offsetWidth) // 将菜单向左移动到适当的位置 menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth else // 否则，就在该位置显示菜单 menu.style.left=document.body.scrollLeft+event.clientX // 与上面道理相同，判断纵向的位置 if (bottomedge<menu.offsetHeight) menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight else menu.style.top=document.body.scrollTop+event.clientY menu.style.visibility="visible" } return false } // 隐藏菜单 function hidemenu(){ if (ie()) menu.style.visibility="hidden" } // 菜单项获得焦点时加亮显示 function highlight(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="highlight" event.srcElement.style.color="highlighttext" }} // 菜单项失去焦点 function lowlight(){ if (event.srcElement.className=="menuitems"){ event.srcElement.style.backgroundColor="" event.srcElement.style.color="menutext" }} if (ie()) document.write (strMenu); document.oncontextmenu= showmenu document.body.onclick= hidemenu MENU.CSS .clsMenu { cursor: default; color: menutext; position: absolute; width: 120px; background-color: menu; border: 1 solid buttonface; visibility:hidden; border: 2 outset buttonhighlight; } .menuitems{ font-size: 12px; color: #000000; padding-left:20px; padding-right:10px; line-height: 20px } INDEX.HTM把<link rel="stylesheet" href="menu.css" type="text/css">加入HEAD区 把<script language="javascript" src="menu.js"></script>加入BODY区 |
