您现在的位置: 军旅同心-旅游自驾-军旅文学 >> 读书赏析 >> 学习园地 >> 电脑网络 >> 技术文章 >> 正文
DHTML模拟菜单
作者:采集员 文章来源:来源于网络 点击数: 更新时间:2005-9-10 14:23:03

{ 在以前的HTML里,元素的位置只能依次排列,我们很难精确地定位与控制网页中的一些元素。CSS2?Cascading Style Sheet Level 2,层叠样式单第二版?的布局?Layout?属性出现并得到浏览器的广泛支持之后,我们不仅可以静态地实现以上目的,而且可以根据鼠标、键盘、时间等预定义好的外界事件动态地改变布局。时下非常流行的网页中“活动的层”便是它的一种形象的运用,我们这里要讲的是如何运用这些属性结合一些DHTML对象在网页中实现类似Windows窗口的下拉菜单(如图所示)。请看以下代码及详细说明。

<?-- 以下部分应该插在代码的<head>之后 -->

<style><?--

/? 这是一些CSS样式。其中″btnTD″是按钮在被按下之前“凸起”的样式类:边框被设置为宽度为1个像素的实线,其中左边框和上边框颜色为浅色(这里为白色),右下边框为深色(深灰色),如果背景为灰色的HTML元素(如单元格)使用这个样式的话,那就非常像一个“凸出”的按钮;“btnDTD”是按钮被按下时“凹下”的样式。 ?/

.btnTD ? border-left? 1 solid #ffffff? border-right? 1 solid #808080?

border-top? 1 solid #ffffff? border-bottom? 1 solid #808080? ?

.btnDTD ? border-left? 1 solid #808080? border-right? 1 solid #ffffff?

border-top? 1 solid #808080? border-bottom? 1 solid #ffffff? ?

td ? font-family? 宋体? font-size? 9pt ?

--></style>

<script language=″JavaScript″><?--

//判断哪个按钮被按下的全局变量

var intBlnClk=0?

//鼠标经过、离开、点击更改单元格CSS样式的函数

function mOvrOut?objSrc??

var argv?argc?blnActive?strColor?strBgColor?strClass?strClassD?strCursor?

argv=mOvrOut.arguments?argc=argv.length?

/?默认情况下不将当前对象置为“激活”?/

blnActive=?argc>1??eval?argv[1]??false?

/?默认鼠标经过当前对象的样式为“凸出的按钮形”?/

strClass=?argc>2 && argv[2]?=′′??argv[2]?′btnTD′?

/?默认鼠标点击的时候当前对象为“凹下的按钮形”?/

strClassD=?argc>3 && argv[3]?=′′??argv[3]?′btnDTD′?

/?将当前对象激活时候的前景色为白色、背景色为蓝色、鼠标样式为手形?/

strColor=′#ffffff′?strBgColor=′#000080′?strCursor=′hand′?

/?IE4及其更高版本才支持这些JavaScript对CSS样式的动态改变?/

if?document.all??

//将当前对象的鼠标样式置为参数传递值

objSrc.style.cursor=strCursor?

//如果是鼠标进入当前对象范围

if??objSrc.contains?event.fromElement???

/?设置为活动样式?/

if?blnActive?? objSrc.bgColor=strBgColor?objSrc.style.color=strColor? ?

/?当前对象不需要置为活动样式的时候,如果本来的样式是“凸出的按钮形”则置为“凹下的按钮形”,反之亦然?/

else objSrc.className=?intBlnClk?=0??strClassD?strClass? ?

//鼠标离开当前对象区域

else if??objSrc.contains?event.toElement???

//将这些样式置为默认值

objSrc.bgColor=′′?objSrc.style.color=′′?objSrc.className=′′? ?

??

/? 显示/隐藏层的通用函数。用objNS、objIE、strStu作为参数,其中objNS和objIE分别是Netscape和IE的“层”对象,strStu为层的状态。因为篇幅所限,请查看本文尾部说明。 ?/

function shoHidLayers????

/? 调用上面的函数,显示/隐藏参数传递的层,这样是为了简化代码。这里不给出详细函数。?/

function showLayer?intCurrent???

//--></script></head>

<body onMouseDown=″if?window.event.srcElement.style.color==′′? showLayer?1?′hide′?″>

<?-- 以上body部分的作用是当鼠标没有按下任何按钮的时候隐藏所有应该隐藏的“菜单”。以下是两个用CSS布局定义的层,名为“menu”的层的初始状态为:在屏幕上的绝对位置为(12?12),可视,层z-index属性为100;“menu1”为不可视。 -->

<div id=″menu″ style=″position?absolute?visibility? visible?left?12px?top?12px? z-index? 100″><table border=″1″ cellspacing=″0″ cellpadding=″2″ bgcolor=″#c0c0c0″ bordercolor=″#c0c0c0″>

<tr><td onMouseOver=″mOvrOut?this?″ onMouseOut=″mOvrOut?this?″ onClick=″mOvrOut?this?false?′btnDTD′??showLayer?1?″>天极网</td></tr>

</table></div>

<div id=″menu1″ style=″position?absolute?visibility? hidden?left?11px?top?34px? z-index? 1″><table border=″0″ cellpadding=″2″ cellspacing=″0″ bgcolor=″#c0c0c0″ class=″btnTD″>

<tr><td onMouseOver=″mOvrOut?this?true?″ onMouseOut=″mOvrOut?this?″ width=″100%″nowrap onClick=″window.location=′http?//www.pcwclub.com/′?showLayer?1?′hide′?″>电脑报读者俱乐部</td></tr>

</table></div>

因为篇幅所限,一些函数不能详细给出及说明,如果需要完整代码请访问以下链接:http?//ctsight.topcool.net/documents/menu.html。


更多
免责声明:作品版权归所属媒体与作者所有!!本站刊载此文不代表同意其说法或描述,仅为提供更多信息。如果您认为我们侵犯了您的版权,请告知!本站立即删除。有异议请联系我们。
文章录入:烟灰缸    责任编辑:烟灰缸 
网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 网站地图 | 版权申明 | 网站公告 | 管理登录 |