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

2024-05-06 16:20:03

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了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>