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..<br>"; var lofolder = new outlookfolder(null,335,100,15); lofolder.addfolder("菜单1","1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..1..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>2..<br>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("<span style='overflow:hidden;height:"+aih+";"+aiw+"'></span>"); 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 = "<span onclick='"+lsUniqueID+".showme(this)' style='overflow:hidden;100%;' class='folder1'></span><span style='position:relative;overflow:hidden;100%;height:1' class='foldercont'></span>"; 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
查看全文
相关阅读:
要想成功,要先学会放弃:30条经典做人的哲学
薛家德(帮别人名字作诗)
激励一生的七个经典故事
出色管理者的时间管理
王华(帮别人名字作诗)
申维维(帮别人名字作诗)
王磊(帮别人名字作诗)
秋凉
牛佳(帮别人名字作诗)
共度良宵
原文地址:https://www.cnblogs.com/Dicky/p/438638.html
最新文章
基于NT/2000建立安全WEB站点的解决方案
类的关联、组合、聚合关系
在.net中运用HTMLParser解析网页的原理和方法
Windows登录类型及安全日志解析
随机生成26大写字母
javascript:void(0) 含义
搜索引擎蜘蛛算法与蜘蛛程序构架
win2003服务详解
加/解密web.config
XML文件操作的整理
热门文章
《Visual Studio Hacks 》读书笔记 (五)
《Visual Studio Hacks 》读书笔记 (八)
《Visual Studio Hacks 》读书笔记 (七)
《Visual Studio Hacks 》读书笔记 (十)
《Visual Studio Hacks 》读书笔记 (三)
《Visual Studio Hacks 》读书笔记 (九)
《Visual Studio Hacks 》读书笔记 (六)
《Visual Studio Hacks 》读书笔记 (四)
ASP.NET 2.0 MVP 问答 ASP.NET 2.0 MVP Hacks
《Visual Studio Hacks 》读书笔记 (十一)
Copyright © 2011-2022 走看看