JavaScript怎么實現鼠標點擊后層展開效果

時間：2016-11-25 17:36:36 沈迪豪908由分享

　　愛學習的小伙伴們，你們知道JavaScript實現鼠標點擊后層展開效果的方法嗎?不知道的話跟著學習啦小編一起來學習JavaScript實現鼠標點擊后層展開效果吧。

　 JavaScript實現鼠標點擊后層展開效果的詳細代碼

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

<html>

<head>

<title>層展開折疊</title>

</head>

<body>

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>

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>

</span>

鼠標點擊后層展開JavaScript鼠標點擊后層展開JavaScript。

</span>

</div>

</div>

</body>

</html>

JavaScript怎么實現鼠標點擊后層展開效果

JavaScript實現鼠標點擊后層展開效果的詳細代碼

相關文章

熱門文章