JavaScript: how to expand the layer after clicking the mouse

Last Update:2015-05-18 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article describes how to expand the layer after clicking the mouse in JavaScript. Share it with you for your reference. The specific analysis is as follows:

This section of JavaScript code allows you to expand the layer after clicking the mouse. The code is a little complicated and focuses on learning and researching. If you are interested, you can modify and simplify it.

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> layer expansion and collapse </title>

</Head>

<Body>

DIV. clTopMenu {

Position: absolute;

Width: 101;

Height: 150;

Clip: rect (0,101 );

Visibility: hidden;

Z-index: 31;

Layer-background-color: # EEEEEE;

Background-color: #00 CCFF

}

DIV. clTopMenuBottom {

Position: absolute;

Width: 101;

Height: 3;

Clip: rect (0,101 );

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;

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.doc ument. 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 ))

Otopmenupolici=02.16.css. zIndex = zindex --

}

Otopmenupolici=02.16.css. visibility = "visible"

}

Function topMenu (num ){

If (oTopMenu [num] [1]. y = nImageheight) oTopMenu [num] [1]. slideDown (oTopMenu [num] [2]. scrollHeight + 20, 10, 40, 'oss-pmenu ['+ 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, 'oss ['+ 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 "> click to expand </a>

</Span>

Click the back layer to expand JavaScript. Click the back layer to expand JavaScript.

</Span>

</Div>

</Div>

</Body>

</Html>

I hope this article will help you design javascript programs.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript: how to expand the layer after clicking the mouse

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support