JavaScript实现鼠标点击后层展开效果的方法

这段JavaScript代码可实现鼠标点击后层展开的功能,代码稍嫌复杂,重在学习研究,有兴趣的可以修改简化一下。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>层展开折叠</title> </head> <body> <style type="text/css"> DIV.clTopMenu{ position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; layer-background-color:#EEEEEE; background-color:#00CCFF } DIV.clTopMenuBottom{ position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#CECFCE; background-color:#000099; z-index:2 } DIV.clTopMenuText{ position:absolute; width:91; left:5; top:15; font-family:"Arial", "Helvetica", "sans-serif"; font-size:9pt; background-color:#EEEEEE; z-index:1; color: #000000 } a:link { color: #000000; text-decoration: none } </style> <script language="JavaScript" type="text/javascript"> function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=this.agent.indexOf("Opera 5")>-1 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() nPlace=0 var nNumberOfMenus=2 var nMwidth=101 var nPxbetween=20 var nFromleft=10 var nFromtop=20 var nBgcolor='#CECFCE' var nBgcolorchangeto='#6380BC' var nImageheight=11 function makeNewsMenu(obj,nest){ nest=(!nest) ? "":'document.'+nest+'.' this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0; this.scrollHeight=bw.ns4?this.css.document.height:this.evnt.offsetHeight this.moveIt=b_moveIt;this.bgChange=b_bgChange; this.slideUp=b_slideUp; this.slideDown=b_slideDown; this.clipTo=b_clipTo; this.obj = obj + "Object"; eval(this.obj + "=this") } function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y} function b_bgChange(color){if(bw.dom || bw.ie4) this.css.backgroundColor=color; else this.css.bgColor=color} function b_clipTo(t,r,b,l){ if(bw.ns4){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l }else this.css.clip="rect("+t+","+r+","+b+","+l+")"; } function b_slideUp(ystop,moveby,speed,fn,wh){ if(!this.slideactive){ if(this.y>ystop){ this.moveIt(this.x,this.y-5); eval(wh) setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed) }else{ this.slideactive=false; this.moveIt(0,ystop); eval(fn) } } } function b_slideDown(ystop,moveby,speed,fn,wh){ if(!this.slideactive){ if(this.y<ystop){ this.moveIt(this.x,this.y+5); eval(wh) setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed) }else{ this.slideactive=false; this.moveIt(0,ystop); eval(fn) } } } function newsMenuInit(){ oTopMenu=new Array() zindex=10 for(i=0;i<=nNumberOfMenus;i++){ oTopMenu[i]=new Array() oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i) oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i) oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i) oTopMenu[i][1].moveIt(0,nImageheight) oTopMenu[i][0].clipTo(0,nMwidth,nImageheight+3,0) if(!nPlace) oTopMenu[i][0].moveIt(i*nMwidth+nFromleft+(i*nPxbetween),nFromtop) else{ oTopMenu[i][0].moveIt(nFromleft,i*nImageheight+nFromtop+(i*nPxbetween)) oTopMenu[i][0].css.zIndex=zindex-- } oTopMenu[i][0].css.visibility="visible" } } function topMenu(num){ if(oTopMenu[num][1].y==nImageheight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)') else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(nImageheight,10,40,'oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,nMwidth,oTopMenu['+num+'][1].y+3,0)') } function menuOver(num){oTopMenu[num][1].bgChange(nBgcolorchangeto)} function menuOut(num){oTopMenu[num][1].bgChange(nBgcolor)} onload=newsMenuInit; </script> <div><span><a href="#">点击展开</a> </span> <div> <span> 鼠标点击后层展开JavaScript鼠标点击后层展开JavaScript。 </span> </div> <div></div> </div> </div> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgjzzg.html