仿OutLook或者QQ的菜单

zoukankan html css js c++ java

仿OutLook或者QQ的菜单

代码如下:
<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> onload=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 onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckup()' style='position:absolute;display:none;10;height:10'></button><button onmouseout='"+lsUniqueID+".SlideClickStop()' onmousedown='"+lsUniqueID+".SlideClickStart();"+lsUniqueID+".SlideCilckdown()' style='position:absolute;display:none;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 全选提示:你可先修改部分代码,再点运行代码]

青苹果Web应用商店 https://webapp.taobao.com/

PHP/ASP.NET/ASP/UCHOME/DISCUZ! X系列网站开发，详细需求联系QQ:8511978

查看全文

相关阅读:
JAVA中SpringMVC获取bean方法，在工具类（utils）注入service
JAVA中json对象转JAVA对象，JSON数组（JSONArray）转集合（List）
maven中pom文件中scope的作用
 页面图片懒加载、延迟加载（lazyload）
js（jQuery）获取自定义data属性的值
 ubantu使用小结
 ipmitool管理工具
 大于2T的硬盘怎么分区
 lamp的动静分离部署
 keepalived脑裂问题

原文地址：https://www.cnblogs.com/Dicky/p/438638.html