【荐】鼠标放上弹出下拉菜单的代码
代码简介:
非常棒的一款代码,鼠标指向文字后显示对应的内容,JS配合CSS实现的。
代码内容:
<! 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"> < head > < title >【荐】鼠标放上弹出下拉菜单的代码_网页代码站(www.webdm.cn)</ title > < script type="text/javascript"> var g_parent,g_child; var g_hideTimer = null; var g_locked = false; function $id(id) { return document.getElementById(id); } function getPos(parentObj) { var parentPos = []; parentPos[0] = parentObj.offsetLeft;//x parentPos[1] = parentObj.offsetTop;//y while (parentObj = parentObj.offsetParent) { parentPos[0] += parentObj.offsetLeft; parentPos[1] += parentObj.offsetTop; } return parentPos; } function showMoreSoftware(parentObj,childName) { if (g_hideTimer != null) { clearTimeout(g_hideTimer); return; } var parentPos = getPos(parentObj); $id(childName).style.left = parentPos[0] + "px"; $id(childName).style.top = parentPos[1] + 26 + "px"; $id("lockBtn").style.left = "163px"; parentObj.className = "active"; $id(childName).style.display = "block"; g_parent = parentObj; g_child = $id(childName); } function hideMoreSoftware() { if (g_locked == true) { return; } else { g_hideTimer = setTimeout(function(){hidingMenu();},1); } } function hidingMenu() { g_parent.className = "normal"; g_child.style.display = "none"; clearTimeout(g_hideTimer); g_hideTimer = null; if (g_locked == true) { $id("lockBtn").className = "drawingPin"; g_locked = false; } } function lockMenu() { if (g_locked == false) { $id("lockBtn").className = "drawingPin_2"; $id("lockBtn").title="解除固定"; g_locked = true; } else { $id("lockBtn").className = "drawingPin"; $id("lockBtn").title="固定"; g_locked = false; } } </ script > < style > *:lang(en) .newHeader .nav{ margin-top:30px; } a:link,a:visited,a:active{ color:#3372a2; text-decoration:none; } a:hover{ text-decoration:underline;} h2{ padding:0; margin:0; font-weight:bold; font-size:12px; height:28px; width:142px;} h2.active{ background:#99c9e3;} h2 div{ position:absolute; padding:1px 1px 0 1px; margin:1px 1px 0 1px; width:138px; overflow:hidden; z-index:10; cursor:pointer;} h2.active div{ background:white;} h2 span{ display:block; padding:0 9px; height:26px;} h2.active span{ background:url(http://webdm.cn/images/20090922/more_soft.gif) repeat-x left top; } h2 span em{ font-style:normal; display:block; background:url(http://webdm.cn/images/20090922/more_soft.gif) no-repeat right -26px; padding-right:15px; line-height:25px;} .softList{ position:absolute; background:white; border:1px #99c9e3 solid; z-index:9; padding:5px 10px; width:165px; display:none;} .left{ float:left; width:50%;} .right{ float:right; width:50%;} h3{ color:#cc6600; margin:0; padding:0; font-size:14px; font-weight:bolder;} ul{ margin:0; padding:0 0 20px 0;} ul.last{ padding:0;} ul li{ height:auto; line-height:18px; } ul li a{ font-size:12px;} </ style > </ head > < body > < div class="main"> < div > < div class="part1"> < div class="version"> < div class="padder"> < h2 onmouseover="showMoreSoftware(this,'softList')" onmouseout="hideMoreSoftware()" class="normal">< div >< span >< em >导航栏</ em ></ span ></ div ></ h2 > < div class="softList" id="softList" onmouseover="showMoreSoftware()" onmouseout="hideMoreSoftware ()"> < a class="drawingPin" href="javascript:void(0);" onclick="lockMenu()" id="lockBtn" title="固 定"></ a > < div class="qq"> < h3 >ASP资源</ h3 > < ul > < li >< a onclick="hidingMenu()" href="/" target="_blank">优秀论坛社区程序</ a ></ li > < li >< a onclick="hidingMenu()" href="/" target="_blank">CMS系统建站资源</ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_1_145_1.shtml" target="_blank">著名博客日 记系统</ a ></ li > </ ul > </ div > < div class="others"> < div class="left"> < h3 >PHP资源</ h3 > < ul > < li >< a onclick="hidingMenu()" href="/sort/list_2_35_1.shtml" target="_blank">企业建站 </ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_2_34_1.shtml" target="_blank">留言程序 </ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_2_47_1.shtml" target="_blank">相册系统 </ a ></ li > </ ul > < h3 >JAVA实例</ h3 > < ul class="last"> < li >< a onclick="hidingMenu()" href="/sort/list_5_80_1.shtml" target="_blank">游戏编程 </ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_5_99_1.shtml" target="_blank">JAVA窗体 </ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_5_82_1.shtml" target="_blank">媒体与网 络</ a ></ li > </ ul > </ div > < div class="right"> < h3 >脚本资源</ h3 > < ul > < li >< a onclick="hidingMenu()" href="/sort/list_11_203_1.shtml" target="_blank">AJAX资 源</ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_11_168_1.shtml" target="_blank">CSS特 效</ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_11_202_1.shtml" target="_blank">网页编 辑器</ a ></ li > </ ul > < h3 >生活品味</ h3 > < ul > < li >< a onclick="hidingMenu()" href="/sort/list_7_228_1.shtml" target="_blank">AJAX教 程</ a ></ li > < li >< a onclick="hidingMenu()" href="/sort/list_7_136_1.shtml" target="_blank">JAVA开 发</ a ></ li > </ ul > </ div > </ div > </ div > </ div > </ div > </ div > </ div > </ body > </ html > < br > < p >< a href="http://www.webdm.cn">网页代码站</ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</ p > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步