|
{ 在以前的ＨＴＭＬ里，元素的位置只能依次排列，我们很难精确地定位与控制网页中的一些元素。CSS２Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ Ｌｅｖｅｌ ２，层叠样式单第二版的布局Ｌａｙｏｕｔ属性出现并得到浏览器的广泛支持之后，我们不仅可以静态地实现以上目的，而且可以根据鼠标、键盘、时间等预定义好的外界事件动态地改变布局。时下非常流行的网页中“活动的层”便是它的一种形象的运用，我们这里要讲的是如何运用这些属性结合一些ＤＨＴＭＬ对象在网页中实现类似Ｗｉｎｄｏｗｓ窗口的下拉菜单（如图所示）。请看以下代码及详细说明。
＜－－ 以下部分应该插在代码的＜ｈｅａｄ＞之后 －－＞
＜ｓｔｙｌｅ＞＜－－
／ 这是一些ＣＳＳ样式。其中″ｂｔｎＴＤ″是按钮在被按下之前“凸起”的样式类：边框被设置为宽度为１个像素的实线，其中左边框和上边框颜色为浅色（这里为白色），右下边框为深色（深灰色），如果背景为灰色的ＨＴＭＬ元素（如单元格）使用这个样式的话，那就非常像一个“凸出”的按钮；“ｂｔｎＤＴＤ”是按钮被按下时“凹下”的样式。 ／
．ｂｔｎＴＤ ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃８０８０８０
ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃８０８０８０
．ｂｔｎＤＴＤ ｂｏｒｄｅｒ－ｌｅｆｔ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｒｉｇｈｔ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ
ｂｏｒｄｅｒ－ｔｏｐ １ ｓｏｌｉｄ ＃８０８０８０ ｂｏｒｄｅｒ－ｂｏｔｔｏｍ １ ｓｏｌｉｄ ＃ｆｆｆｆｆｆ
ｔｄ ｆｏｎｔ－ｆａｍｉｌｙ 宋体 ｆｏｎｔ－ｓｉｚｅ ９ｐｔ
－－＞＜／ｓｔｙｌｅ＞
＜ｓｃｒｉｐｔ ｌａｎｇｕａｇｅ＝″javascript″＞＜－－
／／判断哪个按钮被按下的全局变量
ｖａｒ ｉｎｔＢｌｎＣｌｋ＝０
／／鼠标经过、离开、点击更改单元格ＣＳＳ样式的函数
ｆｕｎｃｔｉｏｎ ｍＯｖｒＯｕｔｏｂｊＳｒｃ
ｖａｒ ａｒｇｖａｒｇｃｂｌｎＡｃｔｉｖｅｓｔｒＣｏｌｏｒｓｔｒＢｇＣｏｌｏｒｓｔｒＣｌａｓｓｓｔｒＣｌａｓｓＤｓｔｒＣｕｒｓｏｒ
ａｒｇｖ＝ｍＯｖｒＯｕｔ．ａｒｇｕｍｅｎｔｓａｒｇｃ＝ａｒｇｖ．ｌｅｎｇｔｈ
／默认情况下不将当前对象置为“激活”／
ｂｌｎＡｃｔｉｖｅ＝ａｒｇｃ＞１﹖ｅｖａｌａｒｇｖ［１］ｆａｌｓｅ
／默认鼠标经过当前对象的样式为“凸出的按钮形”／
ｓｔｒＣｌａｓｓ＝ａｒｇｃ＞２ ＆＆ ａｒｇｖ［２］＝′′﹖ａｒｇｖ［２］′ｂｔｎＴＤ′
／默认鼠标点击的时候当前对象为“凹下的按钮形”／
ｓｔｒＣｌａｓｓＤ＝ａｒｇｃ＞３ ＆＆ ａｒｇｖ［３］＝′′﹖ａｒｇｖ［３］′ｂｔｎＤＴＤ′
／将当前对象激活时候的前景色为白色、背景色为蓝色、鼠标样式为手形／
ｓｔｒＣｏｌｏｒ＝′＃ｆｆｆｆｆｆ′ｓｔｒＢｇＣｏｌｏｒ＝′＃００００８０′ｓｔｒＣｕｒｓｏｒ＝′ｈａｎｄ′
／ＩＥ４及其更高版本才支持这些ＪａｖａＳｃｒｉｐｔ对ＣＳＳ样式的动态改变／
ｉｆｄｏｃｕｍｅｎｔ．ａｌｌ
／／将当前对象的鼠标样式置为参数传递值
ｏｂｊＳｒｃ．ｓｔｙｌｅ．ｃｕｒｓｏｒ＝ｓｔｒＣｕｒｓｏｒ
／／如果是鼠标进入当前对象范围
ｉｆｏｂｊＳｒｃ．ｃｏｎｔａｉｎｓ [1] [2] [3] 下一页 |
