DHTML模拟菜单

{ 在往日的ＨＴＭＬ里，元素的场所只能顺序陈设，咱们很难透彻地定位与遏制网页中的少许元素。ＣＳＳ２Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，层叠款式单第二版的构造Ｌａｙｏｕｔ属性展示并获得欣赏器的普遍扶助之后，咱们不只不妨静态地实行之上手段，并且不妨按照鼠标、键盘、功夫等预订义好的外界事变动静地变换构造。时下特殊时髦的网页中“震动的层”便是它的一种局面的应用，咱们这边要讲的是怎样应用那些属性贯串少许ＤＨＴＭＬ东西在网页中实行一致Ｗｉｎｄｏｗｓ窗口的下拉菜单（如图所示）。请看以次代码及精细证明。

＜－－ 以次局部该当插在代码的＜ｈｅａｄ＞之后 －－＞

＜ｓｔｙｌｅ＞＜－－

／ 这是少许ＣＳＳ款式。个中″ｂｔｎＴＤ″是按钮在被按下之前“杰出”的款式类：边框被树立为宽窄为１个像素的实线，个中左边框和上边框脸色为淡色（这边为白色），右下边框为深色（暗灰色），即使后台为灰色的ＨＴＭＬ元素（如单位格）运用这个款式的话，那就特殊像一个“凸出”的按钮；“ｂｔｎＤＴＤ”是按钮被按下时“凹下”的款式。 ／

．ｂｔｎＴＤ  ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃８０８０８０

ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃８０８０８０ 

．ｂｔｎＤＴＤ  ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ

ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ 

ｔｄ  ｆｏｎｔ－ｆａｍｉｌｙ 宋体 ｆｏｎｔ－ｓｉｚｅ ９ｐｔ 

－－＞＜／ｓｔｙｌｅ＞

＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″ＪａｖａＳｃｒｉｐｔ″＞＜－－

／／确定哪个按钮被按下的全部变量

ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０

／／鼠标过程、摆脱、点击变动单位格ＣＳＳ款式的因变量

ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔｏｂｊＳｒｃ

ｖａｒ ａｒｇｖａｒｇｃｂｌｎＡｃｔｉｖｅｓｔｒＣｏｌｏｒｓｔｒＢｇＣｏｌｏｒｓｔｒＣｌａｓｓｓｔｒＣｌａｓｓＤｓｔｒＣｕｒｓｏｒ

ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓａｒｇｃ＝ａｒｇｖ．ｌｅｎｇｔｈ

／默许情景下不将暂时东西置为“激活”／

ｂｌｎＡｃｔｉｖｅ＝ａｒｇｃ＞１﹖ｅｖａｌａｒｇｖ［１］ｆａｌｓｅ

／默许鼠标过程暂时东西的款式为“凸出的按钮形”／

ｓｔｒＣｌａｓｓ＝ａｒｇｃ＞２ ＆＆ ａｒｇｖ［２］＝′′﹖ａｒｇｖ［２］′ｂｔｎＴＤ′

／默许鼠圈点击的功夫暂时东西为“凹下的按钮形”／

ｓｔｒＣｌａｓｓＤ＝ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］＝′′﹖ａｒｇｖ［３］′ｂｔｎＤＴＤ′

／将暂时东西激活功夫的前局面为白色、背局面为蓝色、鼠标款式为手形／

ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′ｓｔｒＢｇＣｏｌｏｒ＝′＃００００８０′ｓｔｒＣｕｒｓｏｒ＝′ｈａｎｄ′

／ＩＥ４及其更高本子才扶助那些ＪａｖａＳｃｒｉｐｔ对ＣＳＳ款式的动静变换／

ｉｆｄｏｃｕｍｅｎｔ．ａｌｌ

／／将暂时东西的鼠标款式置为参数传播值

ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ

／／即使是鼠标加入暂时东西范畴

ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｆｒｏｍＥｌｅｍｅｎｔ

／树立为震动款式／

ｉｆｂｌｎＡｃｔｉｖｅ ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝ｓｔｒＢｇＣｏｌｏｒｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝ｓｔｒＣｏｌｏｒ 

／暂时东西不须要置为震动款式的功夫，即使从来的款式是“凸出的按钮形”则置为“凹下的按钮形”，反之亦然／

ｅｌｓｅ ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝ｉｎｔＢｌｎＣｌｋ＝０﹖ｓｔｒＣｌａｓｓＤｓｔｒＣｌａｓｓ 

／／鼠标摆脱暂时东西地区

ｅｌｓｅ ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓｅｖｅｎｔ．ｔｏＥｌｅｍｅｎｔ

／／将那些款式置为默许值

ｏｂｊＳｒｃ．ｂｇＣｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｏｌｏｒ＝′′ｏｂｊＳｒｃ．ｃｌａｓｓＮａｍｅ＝′′ 



／ 表露／湮没层的通用因变量。用ｏｂｊＮＳ、ｏｂｊＩＥ、ｓｔｒＳｔｕ动作参数，个中ｏｂｊＮＳ和ｏｂｊＩＥ辨别是Ｎｅｔｓｃａｐｅ和ＩＥ的“层”东西，ｓｔｒＳｔｕ为层的状况。由于篇幅所限，请察看正文尾部证明。 ／

ｆｕｎｃｔｉｏｎ ｓｈｏＨｉｄＬａｙｅｒｓ

／ 挪用上头的因变量，表露／湮没参数传播的层，如许是为了简化代码。这边不给出精细因变量。／

ｆｕｎｃｔｉｏｎ ｓｈｏｗＬａｙｅｒｉｎｔＣｕｒｒｅｎｔ

／／－－＞＜／ｓｃｒｉｐｔ＞＜／ｈｅａｄ＞

＜ｂｏｄｙ ｏｎＭｏｕｓｅＤｏｗｎ＝″ｉｆｗｉｎｄｏｗ．ｅｖｅｎｔ．ｓｒｃＥｌｅｍｅｎｔ．ｓｔｙｌｅ．ｃｏｌｏｒ＝＝′′ ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞

＜－－ 之上ｂｏｄｙ局部的效率是当鼠标没有按卸任何按钮的功夫湮没一切该当湮没的“菜单”。以次是两个用ＣＳＳ构造设置的层，名为“ｍｅｎｕ”的层的初始状况为：在屏幕上的一致场所为（１２１２），可视，层ｚ－ｉｎｄｅｘ属性为１００；“ｍｅｎｕ１”为不行视。 －－＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｖｉｓｉｂｌｅｌｅｆｔ１２ｐｘｔｏｐ１２ｐｘ ｚ－ｉｎｄｅｘ １００″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″１″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｂｏｒｄｅｒｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｏｎＣｌｉｃｋ＝″ｍＯｖｒＯｕｔｔｈｉｓｆａｌｓｅ′ｂｔｎＤＴＤ′ｓｈｏｗＬａｙｅｒ１″＞天极网＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

＜ｄｉｖ ｉｄ＝″ｍｅｎｕ１″ ｓｔｙｌｅ＝″ｐｏｓｉｔｉｏｎａｂｓｏｌｕｔｅｖｉｓｉｂｉｌｉｔｙ ｈｉｄｄｅｎｌｅｆｔ１１ｐｘｔｏｐ３４ｐｘ ｚ－ｉｎｄｅｘ １″＞＜ｔａｂｌｅ ｂｏｒｄｅｒ＝″０″ ｃｅｌｌｐａｄｄｉｎｇ＝″２″ ｃｅｌｌｓｐａｃｉｎｇ＝″０″ ｂｇｃｏｌｏｒ＝″＃ｃ０ｃ０ｃ０″ ｃｌａｓｓ＝″ｂｔｎＴＤ″＞

＜ｔｒ＞＜ｔｄ ｏｎＭｏｕｓｅＯｖｅｒ＝″ｍＯｖｒＯｕｔｔｈｉｓｔｒｕｅ″ ｏｎＭｏｕｓｅＯｕｔ＝″ｍＯｖｒＯｕｔｔｈｉｓ″ ｗｉｄｔｈ＝″１００％″ｎｏｗｒａｐ ｏｎＣｌｉｃｋ＝″ｗｉｎｄｏｗ．ｌｏｃａｔｉｏｎ＝′ｈｔｔｐ／／ｗｗｗ．ｐｃｗｃｌｕｂ．ｃｏｍ／′ｓｈｏｗＬａｙｅｒ１′ｈｉｄｅ′″＞电脑报读者群俱乐部＜／ｔｄ＞＜／ｔｒ＞

＜／ｔａｂｌｅ＞＜／ｄｉｖ＞

由于篇幅所限，少许因变量不许精细给出及证明，即使须要完备代码请考察以次链接：ｈｔｔｐ／／ｃｔｓｉｇｈｔ．ｔｏｐｃｏｏｌ．ｎｅｔ／ｄｏｃｕｍｅｎｔｓ／ｍｅｎｕ．ｈｔｍｌ。