SoFunction
Updated on 2025-03-01

JavaScript to implement the effect of layer expansion after mouse click

This article describes the method of JavaScript to realize the layer expansion effect after mouse click. Share it for your reference. The specific analysis is as follows:

This JavaScript code can realize the function of expanding the layer after clicking the mouse. The code is a bit complicated and focuses on learning and research. If you are interested, you can modify and simplify it.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Layer expansion fold</title>
</head>
<body>
<style type="text/css">
{
 position:absolute;
 width:101;
 height:150;
 clip:rect(0,101,14,0);
 visibility:hidden;
 z-index:31;
 layer-background-color:#EEEEEE;
 background-color:#00CCFF
}
{
 position:absolute;
 width:101;
 height:3;
 clip:rect(0,101,3,0);
 top:11;
 layer-background-color:#CECFCE;
 background-color:#000099;
 z-index:2
}
{
 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)
 =
 =
 =?1:0
 this.opera5=("Opera 5")>-1
 this.ie5=(("MSIE 5")>-1 &&  && !this.opera5)?1:0; 
 this.ie6=(("MSIE 6")>-1 &&  && !this.opera5)?1:0;
 this.ie4=( && ! && !this.opera5)?1:0;
 =this.ie4||this.ie5||this.ie6
 =("Mac")>-1
 this.ns6=( && parseInt() >= 5) ?1:0; 
 this.ns4=( && !)?1:0;
 =(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+'.'     
   =? (obj).style:bw.ie4?[obj].style:bw.ns4?eval(nest+"." +obj):0;  
 =? (obj):bw.ie4?[obj]:bw.ns4?eval(nest+"." +obj):0;   
 =bw.ns4?:
 =b_moveIt;=b_bgChange;
 =b_slideUp; =b_slideDown;
 =b_clipTo;
   = obj + "Object";  eval( + "=this")  
}
function b_moveIt(x,y){=x; =y; =; =}
function b_bgChange(color){if( || bw.ie4) =color; else =color}
function b_clipTo(t,r,b,l){
 if(bw.ns4){=t; =r; =b; =l
 }else ="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
 if(!){
  if(>ystop){
   (,-5); eval(wh)
   setTimeout(+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
  }else{
   =false; (0,ystop); eval(fn)
  }
 }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
 if(!){
  if(<ystop){
   (,+5); eval(wh)
   setTimeout(+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
  }else{
   =false; (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].=zindex--
  }
  oTopMenu[i][0].="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>
&lt;div  class="clTopMenu" align="center" style="height: 170; left: 20; top: 20"&gt;&lt;span class="css3"&gt;&lt;a href="#" onMouseOver="menuOver(0)" onMouseOut="menuOut(0)" onClick="topMenu(0); if( || bw.ie4)(); return false">Click to expand</a> &lt;/span&gt; 
 &lt;div  class="clTopMenuText"&gt;
 &lt;span class="css3"&gt;
 After clicking the mouse, expand the layerJavaScriptAfter clicking the mouse, expand the layerJavaScript。
 &lt;/span&gt;
 &lt;/div&gt;
 &lt;div  class="clTopMenuBottom" style="top: 11; height: 10"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

I hope this article will be helpful to everyone's JavaScript programming.