仿OutLook或者QQ的菜单

左手的ㄟ右手 2021-11-11 23:32 357阅读 0赞

**代码如下:** 
<html> <head> <title>仿OutLook或者QQ的菜单</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <style type='text/css'> .folder1 \{text-align:center; background: \#00A4E1; border: 2px outset; background-image:url(Images/skin/folder\_bg.gif); border-color: \#00BBFF \#0077FF \#FFFFFF \#00BBFF; cursor: hand; font-size: 9pt\} .folder2 \{text-align:center; background: \#20C1FF; border: 2px outset; background-image:url(Images/skin/folder\_bg.gif); border-color: \#00BBFF \#0077FF \#0077FF \#60D3FF; cursor: hand; font-size: 9pt\} .foldercont\{background: \#D9ECF4; border: 1px outset; border-color: \#B0D8FF \#0077FF \#0077FF \#B0D8FF; font-size: 9pt; cursor: default;\} </style> <SCRIPT LANGUAGE=javascript> οnlοad=function()\{ var lstr = "" for (var i=0; i<30; i++) lstr+= "haha.. "; var lofolder = new outlookfolder(null,335,100,15); lofolder.addfolder("菜单1","1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2..1.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.. 2.."); lofolder.addfolder("菜单2",lstr); lofolder.addfolder("菜单3"); lofolder.addfolder("菜单4"); lofolder.addfolder("菜单5"); lofolder.showfolderX(0); \} //\[容器,高,宽,展开速度\] function outlookfolder(aoP,aih,aiw,ait)\{ if (aih==null) aih=200; if (aiw==null) aiw="100%"; if (ait==null) ait=10; var loMain = document.createElement(""); var lsUniqueID = loMain.uniqueID; var loSlide = document.createElement("span"); loSlide.innerHTML = "<button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;width:10;height:10'></button><button οnmοuseοut='"+lsUniqueID+".SlideClickStop()' οnmοusedοwn='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;width:10;height:10'></button>"; var liContH = aih; if (aoP==null)\{ document.body.appendChild(loMain); document.body.appendChild(loSlide); \}else\{ aoP.appendChild(loMain); aoP.appendChild(loSlide); \} //增加一个目录\[名字,内容\] loMain.addfolder = function(str,cont)\{ var loPar = document.createElement("SPAN"); loPar.innerHTML = ""; this.appendChild(loPar); loPar.children\[0\].innerHTML = (str==null?"　":str); loPar.children\[1\].innerHTML = (cont==null?"　":cont); liContH -= parseInt(loPar.children\[0\].offsetHeight); \} //打开／关闭第x个目录夹 loMain.showfolderX = function(aix)\{ loMain.showme(loMain.children\[aix\].children\[0\]) \} //打开/关闭当前obj所在的目录 loMain.showme = function(obj)\{ if (loMain.moving) return; loMain.moving = true; if (obj.bOpen)\{ obj.bOpen = false; loMain.closefolder(obj.parentElement.children\[1\]); obj.className = 'folder1'; \}else\{ obj.bOpen = true; loMain.openfolder(obj.parentElement.children\[1\]); obj.className = 'folder2'; var lxfolders = loMain.children; for (var i=0; i<lxfolders.length; i++)\{ var loChild = lxfolders\[i\].children\[0\]; if(loChild.uniqueID!=obj.uniqueID)\{ lxfolders\[i\].children\[1\].style.height=1; loChild.bOpen = false; loChild.className = 'folder1'; \} \} \} loMain.SlideItemsAction(obj.parentElement.children\[1\]); \} //为目录内容设置Slide var loSlideItem = null; var lbSlideing = false; loMain.SlideCilckdown = function()\{ //向下滚动 loSlideItem.scrollTop += 2; if (!lbSlideing&&loSlideItem.scrollTop<loSlideItem.scrollHeight) setTimeout(lsUniqueID+'.SlideCilckdown()',1) \} loMain.SlideCilckup = function()\{ //向上滚动 loSlideItem.scrollTop -= 2; if (!lbSlideing&&loSlideItem.scrollTop>0) setTimeout(lsUniqueID+'.SlideCilckup()',1) \} loMain.SlideClickStart = function()\{ //允许开始滚动 lbSlideing=false; \} loMain.SlideClickStop = function()\{ //强制停止滚动 lbSlideing=true; \} loMain.SlideItemsAction = function(obj)\{ var loUp = loSlide.children\[0\]; var loDown = loSlide.children\[1\]; if (obj.scrollHeight<=liContH||obj.parentElement.children\[0\].bOpen!=true)\{ loUp.style.display="none"; loDown.style.display="none"; \}else\{ loSlideItem = obj; var lxOffset = getTrueOffset(obj); var lileft = lxOffset\[0\]+obj.offsetWidth-20; var litop = lxOffset\[1\]+obj.offsetHeight+5; with(loUp.style)\{ display=""; left=lileft; top=litop; \} with(loDown.style)\{ display=""; left=lileft; top=litop+liContH-40; \} \} \} //逐渐关闭obj所在的内容显示 loMain.closefolder = function(obj,ai)\{ if (ai==null) ai=liContH; if (ai<ait)\{ obj.style.height=1; ai=1\} if (ai>1)\{ obj.style.height = ai; ai -= ait; setTimeout(lsUniqueID+'.closefolder('+obj.uniqueID+','+ai+')',1) return; \} loMain.moving = false; \} //逐渐打开obj所在的内容显示 loMain.openfolder = function(obj,ai)\{ if (ai==null) ai=1; if (liContH>ai)\{ obj.style.height = ai; ai += ait; setTimeout(lsUniqueID+'.openfolder('+obj.uniqueID+','+ai+')',1) return; \} loMain.moving = false; \} function getTrueOffset(e)\{ var x=0; var y=0; if(!e)return \[x,y\]; while(e)\{ x+=parseInt(e.offsetLeft); y+=parseInt(e.offsetTop); e=e.offsetParent; \} return \[x,y\]; \} return loMain; \} </SCRIPT> </head> <body> </body> </html> 
\[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码\]

转载于:https://www.cnblogs.com/Dicky/archive/2006/06/29/438638.html