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

前端技术 2023/09/04 JavaScript

本文实例讲述了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 id=\"divTopMenu0\" class=\"clTopMenu\" align=\"center\" style=\"height: 170; left: 20; top: 20\"><span class=\"css3\"><a href=\"#\" onMouseOver=\"menuOver(0)\" onMouseOut=\"menuOut(0)\" onClick=\"topMenu(0); if(bw.dom || bw.ie4)this.blur(); return false\">点击展开</a>
 </span> 
 <div id=\"divTopMenuText0\" class=\"clTopMenuText\">
 <span class=\"css3\">
 鼠标点击后层展开JavaScript鼠标点击后层展开JavaScript。
 </span>
 </div>
 <div id=\"divTopMenuBottom0\" class=\"clTopMenuBottom\" style=\"top: 11; height: 10\"></div>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10482

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案