• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

DHTML模拟菜单

前端 搞代码 7年前 (2018-06-17) 85次浏览 已收录 0个评论

{ 在以前的HTML里,元素的位置只能依次排列,我们很难精确地定位与控制网页中的一些元素。CSS2Cascading 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 mOvrOutobjSrc

var argvargcblnActivestrColorstrBgColorstrClassstrClassDstrCursor

argv=mOvrOut.argumentsargc=argv.length

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

blnActive=argc>1tevalargv[1]false

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

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

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

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

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

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

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

ifdocument.all

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

objSrc.style.cursor=strCursor

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

ifobjSrc.containsevent.fromElement

/设置为活动样式/

ifblnActive objSrc.bgColor=strBgColorobjSrc.style.color=strColor

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

else objSrc.className=intBlnClk=0tstrClassDstrClass

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

else ifobjSrc.containsevent.toElement

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

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

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

function shoHidLayers

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

function showLayerintCurrent

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

<body onMouseDown=″ifwindow.event.srcElement.style.color==′′ showLayer1′hide′″>

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

<div id=″menu″ style=″positionabsolutevisibility visibleleft12pxtop12px z-index 100″><table border=″1″ cellspacing=″0″ cellpadding=″2″ bgcolor=″#c0c0c0″ bordercolor=″#c0c0c0″>

<tr><td onMouseOver=″mOvrOutthis″ onMouseOut=″mOvrOutthis″ onClick=″mOvrOutthisfalse′btnDTD′showLayer1″>天极网</td></tr>

</table></div>

<div id=″menu1″ style=″positionabsolutevisibility hiddenleft11pxtop34px z-index 1″><table border=″0″ cellpadding=″2″ cellspacing=″0″ bgcolor=″#c0c0c0″ class=″btnTD″>

<tr><td onMouseOver=″mOvrOutthistrue″ onMouseOut=″mOvrOutthis″ width=″100%″nowrap onClick=″window.location=′http//www.pcwclub.com/′showLayer1′hide′″>电脑报读者俱乐部</td></tr>

</table></div>

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

欢迎大家阅读《Dhtml模拟菜单》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:DHTML模拟菜单

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址