| javascript设计网页中的下拉菜单 |
|
作者：网络 文章来源：转载 点击数： 更新时间：2006-1-19  |
| [ 字体：缩小 正常 放大 | 双击自动滚屏 ] |
请选择合适的字体颜色：
|
|
CurMenu.style.clip = "rect(0 0 0 0) ";CurMenu.style.display = "block";
当鼠标移出主菜单时有两种情况，一种情况是鼠标在子菜单及其主菜单之间移动，这时不能隐藏子菜单；另一种情况是鼠标移出了子菜单及其主菜单的区域，这时需要隐藏子菜单。我们通过执行hideMenu()响应主菜单的onmouseout，同时执行hideMenu()响应子菜单所在区域的onmouseout事件来完成。
网页中的另外两个函数mouseout() 和mouseover() 的功能很简单，分别用于处理鼠标移动时菜单项的颜色变化。
完整的源代码参见《电子与电脑》网站www.pccomputing.com.cn。
网页浏览的效果如图1所示，运行环境为IE4.0以上版本。
（图注WANGYE） 图1
<HTML>
<HEAD>
<TITLE>网页中的下拉菜单</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript" >
var IsDroped =false;
function mouseout()
{
window.event.srcElement.style.color = 'white';//鼠标移开时置为白色
}
function mouseover()
{
window.event.srcElement.style.color = 'red';//鼠标进入时置为红色//鼠标进入时置为红色
}
function doMenu(MenuID)
{
var CurMenu = document.all(MenuID);
//为避免闪烁,如果下拉菜单已经显示则不重画.
if (IsDroped==true)
{
window.event.cancelBubble = true;
return false;
}
window.event.cancelBubble = true;
TempMenu = CurMenu;
//计算下拉菜单的位置
x = window.event.srcElement.offsetLeft + window.event.srcElement.offsetParent.offsetLeft;
x2 = x + window.event.srcElement.offsetWidth;
y = pad.offsetHeight;
CurMenu.style.top = y;
CurMenu.style.left = x;
CurMenu.style.clip = "rect(0 0 0 0)";
CurMenu.style.display = "block";
//延时2毫秒后再显示菜单,保证ToolbarMenu.offsetHeight有值,避免从主菜单移向下拉菜单时下拉菜单消失.
window.setTimeout("showMenu()", 2);
return true;
}
function showMenu()
{
y2 = y + TempMenu.offsetHeight;
TempMenu.style.clip = "rect(auto auto auto auto)";上一页 [1] [2] [3] [4] [5] 下一页
|
|
| 文章录入：54iter 责任编辑：54iter |
上一篇文章： 用javascript实现利用FLASH嵌入声音
下一篇文章： javascript设计漫天雪花 |
| 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
