对象化JS之----仿outlook或者QQ的菜单
时间： 2021-07-31 作者：daque
<html><head><meta http-equiv='content-type' content='text/html; charset=utf8'><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.."); 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+";width:"+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;width:10;height:10'></button><button onmouseout='"+lsuniqueid+".slideclickstop()' onmousedown='"+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 = "<span onclick='"+lsuniqueid+".showme(this)' style='overflow:hidden;width:100%;' class='folder1'></span><span style='position:relative;overflow:hidden;width: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>
相关推荐
推荐下载
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号